왜 당신은 "반응"을 배워야 합니까?

소개

나는 React 프레임워크를 사용한 지 이미 한참이 되었다. 나는 그것을 이해할수록 이 프레임워크를 경외한다.
본고에서 저는 제 생각을 공유하고 싶습니다. 왜 저는 React가 유사 이래 가장 유행하는 자바스크립트 프레임워크 중 하나라고 생각하는지, 그리고 자바스크립트 프레임워크를 배우고 싶다면 왜 그것을 배워야 하는지.
"React"시리즈의 첫 번째 글입니다. 제가 Tyler Mcginnis 과정 @ui에서 배운 지식을 바탕으로 합니다.데프야, 테일러를 봐라. 그는 훌륭한 선생님이다.

강력한 합성 모형

조합은 언어와 무관한 프로그래밍 원칙으로 프로그램이나 함수를 조합하여 프로그램이나 함수를 구축하는 데 의존한다.
React는 같은 개념을 확장하여 그것들을 조합하여 React 구성 요소를 구축할 수 있다.
우선, 페이지 눈썹,main,footer 구성 요소를 포함하는 아주 간단한 예시를 보여 드리겠습니다.

function Header (props) {
        <>
            <h3>{props.headerInfo}</h3>
    </>
}

function Footer (props) {
        <>
            <h5>{props.footerInfo}</h5>
    </>
}

function Main (props) {
    return (
        <>
            <h1>{props.mainInfo}</h1>
    </>
    )
}

function Home (props) {
  return (
    <div>
      <Header headerContent={props.headerInfo} />
      <Main mainContent={props.mainInfo} />
      <Footer footerContent={props.footerInfo} />
    </div>
  )
}

위의 예에서 볼 수 있듯이 각 함수(예를 들어 Header, Main, Footer)는 보기를 되돌려줍니다.이러한 뷰의 각 항목은 마스터 어셈블리에서 한 단계 더 구성됩니다.하나 이상의 구성 요소를 조합하여 UI를 만들려는 이러한 생각은 그 기능을 믿을 수 없을 정도로 강하게 한다.
커뮤니티는 이 아이디어를 이용하여 NPM에서 사용할 수 있는 많은 제3자 React 구성 요소를 개발했다.
간단한 유형으로 상술한 모든'클릭'을 할 수 있다. 반응 구성은 피자가게의'피자 만들기'나'레고를 개발자로 하는 것'에 해당한다.
참조 - https://reactjs.org/docs/composition-vs-inheritance.html

단방향 데이터 흐름

기존 응용 프로그램에서 DOM을 업데이트하는 이벤트 처리 프로그램이 있습니다. DOM은 일반적으로 응용 프로그램의 상태를 다음과 같이 저장합니다.

응용 프로그램이 증가함에 따라 이벤트 처리 프로그램이 상태의 다른 부분을 업데이트하기 시작했고 위의 그림은 아래의 스파게티처럼 보이기 시작했다.

React를 사용합니다. 이것은 단방향 데이터 흐름 개념을 따릅니다. 이것은 데이터가 하나의 방식이 있고 응용 프로그램의 다른 부분으로 전송될 수 있다는 것을 의미합니다.
모든 구성 요소는 자신의 상태가 있기 때문에 그것들을 업데이트하기만 하면 된다.상태 변화에 따라 React는 상태 변화에 따라 UI를 업데이트합니다.

단방향 데이터 흐름 시스템의 장점:

상태가 단일 위치에 있기 때문에 데이터 업데이트 작업을 쉽게 추적할 수 있습니다. 흐름은 단방향이기 때문입니다.

공용 상태가 변경될 때 다시 렌더링할 구성 요소를 제어할 수 있습니다.이 모든 구성 요소를 부모 구성 요소를 포함하는 공통 상태로 둡니다.

잘못 쓴 코드로 인한 버그와 오류를 추적하고 복구하기 쉽다.

선언적 사용자 인터페이스

React에서 모든 것은 하나의 구성 요소입니다. 모든 구성 요소는 주로 두 가지가 있습니다. (실제로는 세 가지가 있습니다. 생명주기 방법을 포함합니다.) 구성 요소를 정의할 때 이 두 가지를 고려해야 합니다.
a, 구성 요소 상태.
b. UI의 모양은 상태에 따라 다릅니다.
JQuery & React의 다음 코드 예제를 살펴보겠습니다.
JQuery 사용:

$('btn').click(() => {
  $(this).toggleClass('highlight')
  $(this).text() === 'Add Highlight'
    ? $(this).text('Remove Highlight')
    : $(this).text('Add Highlight')
})

React 사용:

<Btn
  highlight={this.state.highlight}
  onToggle={this.toggleBtn}
/>

상기 코드 예시를 바탕으로 주의해야 할 관건은 다음과 같다.

JQuery 예에서 DOM에 액세스하여 이벤트에 따라 업데이트해야 합니다.

React 예에서 다음 두 가지 걱정만 하면 됩니다.

상태 또는 이벤트 기반 상태 업데이트 방법React는 DOM 업데이트의 어려운 작업을 수행합니다.

상태가 변경되면 버튼 구성 요소의 UI는 어떻게 응답해야 합니까?이것은 "This"에 설명되어 있습니다.toggleBtn 함수.

React는 추상적인 기능을 제공하기 때문에 구성 요소가 DOM 업데이트를 걱정할 필요가 없습니다.

핵심 JavaScript 기능 활용 - 최소 사용자 정의 API

React에서는 이미 JavaScript를 사용하여 수행할 수 있는 기능을 다시 만들지 않습니다.
다음 예제를 살펴보겠습니다. 세 가지 다른 JavaScript 프레임워크를 사용하여 "제품"그룹에서 무질서한 목록을 만듭니다. Angular, Vue, React입니다.
Angular는 제품 배열에서 ngFor를 사용하여 순환합니다.

<ul id="products">
        <li *ngFor="let product in products">
                {{product.name}}
        </li>
</ul>

Vue는 "v-for"를 사용하여 "products"배열에서 순환합니다.

<ul id="products">
        <li v-for="product in products">
                {{product.name}}
        </li>
</ul>

React 사용

<ul id="products">
        {products.map((product, index) => (
            <li key="index">
                {{product.name}}
          </li>
</ul>

위의 예에서 알 수 있듯이 React는 Vue 또는 Angular에서 제공하는 모든 특수 API에 비해 JavaScript의 매핑 방법을 사용합니다.Angular나 Vue가 나를 공격하기 전에 나는 결코 다른 프레임워크를 폄하하는 것이 아니다.이것은 단지 내가 여기서 강조하고 싶은 점일 뿐이다.
여기서 주의해야 할 중요한 점은 React의 API 레이어가 최저 수준을 유지하고 자바스크립트가 제공하는 기능을 이용했다는 것이다.

정확한 추상

"React"는 다음과 같은 이유로 정확한 추상화를 제공한다고 생각합니다.

은 하나의 틀로서 React와 그 어떠한 추상도 자신의 의견을 고도로 고집한다.

React가 제공하는 추상은 사용자가 그것을 사용할 수 있도록 허용하고 복잡하게 만들지 않습니다.

추상적으로 제공되는 행위는 충분히 간단하여 세부 사항을 누설하지 않고 가능한 한 거의 무한한 용례를 확장하고 지원할 수 있다.

증거는 푸딩 안에 있다는 말이 있다. React나 React 위에 구축된 도구를 사용하면 React가 제공하는 추상적인 기능이 얼마나 강한지 알 수 있다.

Gatsby는 React 기반의 무료 소스 오픈 프레임워크로 개발자들이 속도가 빠른 사이트와 응용 프로그램을 구축하는 데 도움을 준다.

Next.js는 JavaScript 프레임워크로 React를 사용하여 서버 쪽에서 보여주는 정적 웹 응용 프로그램을 구축할 수 있습니다.

결론

저는 본고에서 언급한 이유가 자바스크립트 프레임워크의 선택으로 ReactJS를 배우기 시작할 수 있기를 바랍니다.
구독하고 트위터에 팔로우하는 거 잊지 마세요.

다음 글도 좋아할 수 있습니다.