React, 기능적이고 고급스러운 JavaScript 라이브러리

React는 "사용자 인터페이스를 구축하기 위한 JavaScipt 라이브러리"로 설명됩니다. React는 가장 인기 있는 JavaScript 라이브러리 중 하나이므로 수영장에 발가락을 담그는 것이 좋습니다. React는 사용자가 애플리케이션의 프론트엔드를 위한 사용자 인터페이스를 빠르게 만들 수 있도록 하는 HTML 요소의 본질적으로 사용자 지정 가능하고 재사용 가능한 구성 요소를 사용합니다. 이러한 별도의 구성 요소를 사용하면 코드를 가독성에 도움이 되는 재사용 가능한 조각으로 나눌 수 있습니다. React는 구성 요소를 클래스, 순수 및 기능의 별도 범주로 나눕니다.

수업

의 모든 구성 요소가 이러한 방식으로 작성될 수 있으며 아무 것도 손상되지 않습니다. 그러나 클래스 구성 요소는 검사를 거칩니다. 기능 구성 요소를 사용하여 구현하기 위해 이러한 검사가 필요하지 않은 경우 선호됩니다(기능 구성 요소에 대해서는 잠시 후에 자세히 설명하겠습니다). 클래스 구성 요소 구문은 필요에 따라 간단하게 또는 더 복잡하게 만들 수 있습니다. 수명 주기 방법을 사용하기 시작하면 더 복잡해집니다.

베어 본 클래스 구성 요소는 다음과 같습니다.

import React from 'react'

class Test extends React.Component {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

순수한

React의 순수 구성 요소는 수명 주기 메서드에 액세스할 수 없습니다shouldComponentUpdate. 그러나 이전 소품과 새 소품의 얕은 비교를 수행합니다. 순수 구성 요소의 구문은 클래스 구성 요소와 거의 동일합니다. 유일한 차이점은? Component를 가져오는 대신 PureComponent를 가져옵니다. 구성 요소에 미세 조정 업데이트가 필요하지 않은 경우 Pure 구성 요소를 사용하는 것이 좋습니다.

구문의 사소한 차이점을 보려면 아래를 살펴보십시오.

import React from 'react'

class Test extends React.PureComponent {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

기능의

기능적 구성 요소는 이 블로그에서 살펴보는 세 가지 중 가장 덜 복잡합니다. 기능 구성 요소는 "확장"되지 않으며Component 사용하지도 않습니다render. 대신 JSX를 반환합니다. 기능 구성 요소는 '확장'되지 않기 때문에Component 상태를 저장하는 데 필요한 것을 상속하지 않지만 props를 인수로 받을 수 있습니다. 기능 구성 요소는 논리에 덜 의존하고 사용자가 지시한 내용을 표시하는 데 더 많이 의존합니다. 기능 구성 요소는 경량 구성 요소로 사용하는 것이 가장 좋지만 상황에 따라 복잡해질 수 있습니다.

import React from 'react'

const Test = props => {
  return(
    <div>
      Hello {props.name}!
    </div>
  )
}

export default Test;

빠른 사이드 바
JSX(JavaScript XML)를 사용하면 HTML 태그를 React 요소로 변환하여 React에서 HTML을 쉽게 작성하고 추가할 수 있습니다.

보너스

"컨테이너"및/또는 "프레젠테이션"구성 요소가 주위에 던져지는 단어를 들었을 것입니다. 알아두면 좋은 것들! 프레젠테이션 구성 요소와 컨테이너 구성 요소는 다른 유형의 구성 요소가 아닙니다. 대신 React 앱을 보고 구성하는 방법입니다.
우리만의 React 앱을 만들 때 이 생각을 어떻게 구현할 수 있는지 자세히 살펴보겠습니다.

컨테이너

컨테이너 구성 요소는 큰 총입니다. 그들은 논리와 상태를 다룹니다. 컨테이너 구성 요소는 상태 업데이트 또는 제출 이벤트 처리와 같은 특정 기능을 수행하려는 곳입니다.

프레젠테이션

프레젠테이션 구성 요소는 페이지에 콘텐츠를 표시하는 것과만 관련이 있습니다. 그들은 논리에 의해 무게를 느끼지 않으며 하루 중 시간을 상태에 제공하지 않습니다(그들은 그것을 다루고 싶지 않습니다).

컨테이너는 아기의 모든 Presentational 구성 요소를 팔에 안고 있는 부모로 생각할 수 있습니다.

React 덕분에 코드를 구성 요소로 분리할 수 있으므로 우려 사항을 즉시 분리하여 코드를 개선할 수 있습니다. 구성 요소와 구성 요소가 각 구성 요소와 상호 작용하는 방식을 이해하는 것은 React 라이브러리를 이해하고 즐기는 데 중요합니다. 이 정보가 React 여정에 도움이 되기를 바랍니다!