이전 방법에서 벗어나기 - jQuery 및 React

사람들이 보편적으로 생각하는 것과는 반대로 React의 가장 큰 용례는 스파가 아니라 가장 흔하고 나에게 가장 적합한 혼합 응용 프로그램이다. 이 글에서 나는 어떻게, 그리고 왜 React 원한자에서 React 팬이 되었는지, 그리고 왜 React가 jQuery의 완벽한 대체자인지 소개할 것이다.
React와 Vue가 처음에 흡인력을 얻고 현대 UI를 구축하는 사실의 표준이 되었을 때 저는 어떤 내재적인 저항력을 가진 적이 있습니다.
네, 저는 AngularJS를 배제하고자 합니다. 비록 AngularJS는 전단혁명의 선구자이지만 웹 2.0을 가져왔습니다.
Angular는 철학적으로 완전히 상반된 것이다. 이것은 성숙한 SPA 프레임워크이고 React는 하나의 시도 라이브러리일 뿐이다. 나는 여전히 SPA가 정확한 방법이라고 믿지 않는다. 나는 개인적으로 혼합 방법을 더욱 좋아한다.
생각하고 있는 모든 사람들에게.  - "그럼 뷔는?",Vue는 이 두 극단 사이에 있습니다.
유행하는 관점과 반대로 React의 가장 큰 용례는 SPA가 아니라 가장 흔하고 나에게 가장 적합한 혼합 응용 프로그램이다.나 안 믿어?페이스북의 단 아브라모프가 뭐라고 했는지 보자.

It’s interesting that React became associated so much with SPAs but Facebook isn’t using it for SPAs (except for the Instagram website and some internal tools) -

내가 가장 싫어하는 일 중 하나는 웹 패키지와 그들이 가지고 온 모든 도구이다.
나는 그들이 전방에 불필요한 복잡성을 도입했다고 강력히 생각한다. 그렇다. 그들은 우리 개발자들로 하여금 로켓 과학자처럼 대량의 조정을 해야 한다고 느끼게 하고 지렛대와 톱니바퀴를 얼마나 당기고 돌려야만 그들이 운행할 수 있다고 생각하게 한다. 그러나 결국 그들은 정말로 업무를 위해 가치를 증가시켰는가?
그들은 제품과 사용자 체험을 개선하여 더욱 높은 유지보수와 개발 원가, 그리고 더욱 높은 새로운 혈액이 장벽에 들어갈 수 있도록 보장했습니까? 그리고 우리는 일반적인 ole jQuery, 심지어 더 좋은 vanilla JS로 같은 일을 할 수 있었습니다.
내가 이 문제를 발견한 후, 나는 다시 한 번 시도하기로 결정했다. 세상에, 세상에, 나는 매우 놀랐다.
reactcli(와vuecli)가 도입됨에 따라 모든 실질적인 도구와 컴퓨터 과학 박사 학위를 취득하는 데 해당하는 구축 절차는 80%-90%의 용례에 있어서 이미 시대에 뒤떨어졌다. 비록 일부 가장자리 사례에 대해서는 소매를 걷어붙이고 웹팩을 함부로 사용해야 한다.
물론 당신이 상당히 간단한 것을 구축하고 있다면, Ajax가 제출한 연락처가 있을 수도 있고, 완전히 다른 것이 될 수도 있지만, 이것은 충분히 간단하다. 내가 보기에 vanlla JS는 믿을 만한 방법이기 때문에 대포를 내놓을 필요가 없다.당신은 심지어 jQuery를 사용할 수 있지만, 현재 세계에서는 확실히 그것을 필요로 하지 않지만, 이것은 완전히 다른 주제입니다.

Keep it simple  -  this should always be your mantra.

이런 상황에서 프레임워크를 사용하려면 90퍼센트의 코드가 프레임워크 인프라 시설이고 나머지는 실제 논리가 될 것이다.이것은 매우 과도합니다. 불필요한 샘플 파일을 도입하고 묶음의 크기를 증가시켰기 때문에 성능에 직접적인 영향을 주었습니다.더 큰 묶음은 인터넷에 더 많은 바이트를 보내야 한다는 것을 의미하기 때문에 실제로 당신의 업무 비용은 매우 높다. 단지 이 반짝이는 새로운 것을 사용하고 싶기 때문이다.
오, 너는 그 밀리초들이 중요하지 않다고 생각하니?응, 그것들은 곧 축적될 수 있어. 특히 데이터가 높은 사이트에서는 오늘날의 기계 기능이 강하기 때문에 우리가 결과를 따지지 않고 그것들에게 물건을 던져야 한다는 것을 의미하지 않아. 우리는 우리의 자원을 지켜야 해.
이렇게 보면 마치 네가 10층 건물의 기초를 세우고 그 위에 텐트를 친 것 같다.
복잡한 UI를 구축할 때 이전 방법에 비해 React는 확실히 빛을 발합니다.
React를 사용하면 개발의 단순성은 사용자가 구축하고 있는 UI의 복잡성에 따라 증가하거나 일반적인 JS/jQuery 방법에 비해 개발 원가가 복잡성과 반비례한다.
이것은 모든 시각 유형에 적용되는 작은 도표다.

대화는 값싸다. 우리는 현실 세계에서 온 예로 우리의 손을 더럽힌다.
영수증 양식이 있습니다. 영수증 날짜, 영수증 만기일, 주제 등 일반적인 데이터를 제외하고 사용자는 영수증 항목을 추가/삭제할 수 있어야 합니다.
한편, 청구서 항목은 다음과 같습니다.

영수증을 발급하고 있는 제품/서비스의 이름 및/또는 설명,

수량,

가격

귀하가 제공할 수 있는 모든 할인,

발생하는 모든 벌금,

그러면 귀국 법률에 따라 우리는 부가가치세 또는 판매세를 징수할 수 있습니다

마지막으로 상기 내용과 관련된 모든 계산.

너는 지금 간단해 보이는 일이 어떻게 신속하게 복잡해지는 것을 보았니?
낡은 방법을 사용하려면 많은 것을 고려해야 한다.

모든 다른 입력 필드에 변경 이벤트 처리 프로그램을 추가합니다. 그 중 일부는 언제 분리할지 추적할 수 있도록 서로 상쇄해야 합니다.

송장 항목을 추가하거나 삭제할 때마다 하위 노드를 추가하거나 삭제하거나 HTML을 문자열로 작성하여 DOM을 조작해야 합니다.
어떤 방식을 선택하든지 HTML을 연결하고 변수로 채워야 하기 때문에 제어하기 어려워질 수 있습니다.ECMA 6 문자열은 확실히 이 점을 약간 완화시켰지만, 여전히 번거로워질 것이다.
디자이너가 뭔가를 바꿨는데, 바닐라 JS 코드에 붙어 있는 부분을 얼마나 바꿔야 하는지 상상해 보세요.
기억해야 할 또 다른 것은 DOM을 문자열로 조작하면 특정한 DOM 요소의 모든 이벤트 처리 프로그램을 죽인다는 것입니다.네, 또 한 번 기회를 잡았어요.

계산  -  영수증 항목을 추가하거나 삭제할 때마다 특정 값을 계산해야 하며, 영수증의 소계, 세금, 총 등을 업데이트해야 합니다. 기본적으로 상태 저장소를 만들 것입니다.

나는 한두 가지 일을 놓쳤을지도 모른다. 내가 낡은 방식으로 이 용례를 처리하려고 할 때 튀어나온다. 통상적으로, 네가 그것을 실현하기 전에, 모든 것이 간단하게 들리고, 일련의 처리해야 할 새로운 용례가 나타난다.
React를 사용하려면 당신의 심리 상태를 조금 바꿔야 합니다. 간단히 말하면 당신은 한 가지, 즉 상태에 관심을 가져야 합니다.이것은 논리를 크게 간소화시켰다. 당신은 당신의 상태에만 관심을 갖는다. 이것은 당신이 유일하게 조작해야 할 일이며, 당신의 영수증 입력 필드와 영수증 항목은 당신의 상태에 따라 다시 나타날 것이다.
간소화된 코드 예시를 살펴보겠습니다. 이것은 당신이 상황을 더욱 명확하게 이해할 수 있을 것입니다.

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

class InvoiceItemForm extends React.Component {

  constructor(props) {
      super(props)

      this.state = {
          itemInput: {
              description: '',
              quantity: 0,
              price: 0,
              subtotal: 0,
              taxRate: 0.17,
              tax: 0,
              total: 0
          },
          invoiceItems: []
      }

      this.handleInputChange = this.handleInputChange.bind(this);
      this.addItem = this.addItem.bind(this);
      this.removeItem = this.removeItem.bind(this);
  }

  handleInputChange(e) {
      let input = (e.target || e.currentTarget);
          input.subtotal = input.price * input.quantity;
          input.tax = input.subtotal * input.taxRate;
          input.total = input.subtotal * (1 + input.taxRate);

      this.setState((state) => { return state.itemInput[input.name] = input.value; });
  }

  addItem() {
      let state = this.state;
          state.items.push(state.itemInput);

          // Clear the last input
          for (let key in state.itemInput) {
              switch (key) {
                  case 'description'
                      state.itemInput[key] = '';
                      break;
                  case 'taxRate':
                      state.itemInput[key] = 0.17;
                      break;
                  default:
                      state.itemInput[key] = 0;
                      break;
              }
          }

      this.setState({itemInput: state.itemInput, items: state.items});
  }

  removeItem(e) {
      let rowIndex = (e.target || e.currentTarget).parentNode.parentNode.rowIndex;

      let items = this.state.items.filter((item, i) => { return i !== rowIndex; });

      this.setState({items : items});
  }

  renderCells(item, rowIndex) {
      let cells = [<td>{rowIndex + 1}</td>];

      let i = 1;
      for (let key in item) {
          cells.push(<td key={i}>{item[key]}</td>);
          i++;
      }

      cells.push(
          <td>
              <button onClick={this.removeItem}>
                  {'Remove Item'}
              </button>
          </td>
      );

      return cells;
  }

  render () {
    return (
        <React.Fragment>
            <div>
                <input
                    name={'description'}
                    value={this.state.itemInput.description}
                    onChange={this.handleInputChange} />
                <input
                    name={'price'}
                    value={this.state.itemInput.price}
                    onChange={this.handleInputChange}>
                <input
                    name={'quantity'}
                    value={this.state.itemInput.quantity}
                    onChange={this.handleInputChange}>
                <input
                    name={'taxRate'}
                    value={this.state.itemInput.taxRate}
                    onChange={this.handleInputChange}>
                <input
                    name={'subtotal'}
                    disabled={true}
                    value={this.state.itemInput.subtotal}
                    onChange={this.handleInputChange}>
                <input
                    name={'tax'}
                    disabled={true}
                    value={this.state.itemInput.tax}
                    onChange={this.handleInputChange}>
                <input
                    name={'total'}
                    disabled={true}
                    value={this.state.itemInput.total}
                    onChange={this.handleInputChange}>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>Item no.</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Tax Rate</th>
                        <th>Subtotal</th>
                        <th>Tax</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.items.map((item, i) => {
                            return (
                                <tr key={i}>
                                    {this.renderCells(item, i)}
                                </tr>
                            );
                        })
                    }
                </tbody>
            </table>
        </React.Fragment>
    );
  }
}
export default InvoiceItemForm

워아라, 이렇게!
여보게, 이전하고 싶은 jQuery 프로그램이 있습니까? 아니면 다음 백만 달러에 가장 적합한 프레임워크가 무엇인지 알고 싶을 뿐입니까?이것은 우리의 두통 문제가 될 수 있도록 전화[email protected]로 우리에게 연락해 주십시오.

네가 가기 전에..

만약 당신이 이 문장을 읽는 것을 좋아한다면, 공유하세요.너는 마땅히 우리의 다른 출판물을 보아야 한다. 너도 아마 좋아할 것이다.우리는 때때로 소프트웨어 개발, 기교와 비결, 그리고 어떻게 하면 더 좋은 개발자와 상업인이 될 수 있는지에 관한 글을 쓴다.우리와 함께 끊임없이 진보하는 길에 오르자!
Facebook,,,Medium 또는 로 전화하십시오.
최초 발표jsguru.io.