2018 년 React.js에 대한 종합 안내서

이 기사는 원래 2015 년 1 월에 출판되었지만 최근 React 16.3 및 여기에 포함 된 모든 장점으로 업데이트되었습니다.

컴포넌트는 React의 빌딩 블록입니다. 각도 배경에서 오는 경우 구성 요소는 지시문과 매우 유사합니다. 다른 배경에서 온 사람들은 본질적으로 위젯 또는 모듈입니다.

컴포넌트를 HTML, CSS, JS 및 해당 컴포넌트에 특정한 일부 내부 데이터의 모음으로 생각할 수 있습니다. React 컴포넌트를 웹의 콜라 치라고 생각합니다. 그들은 당신이 필요한 모든 것을 맛있는 작곡가 꾸러미에 싸서 가지고 있습니다.

이러한 구성 요소는 순수 JavaScript로 정의되거나 React 팀이 "JSX"라고 정의한 구성 요소로 정의 할 수 있습니다. JSX를 사용하기로 결정한 경우 (이것은 매우 표준 적이며이 자습서에서 사용할 것입니다) JSX를 JavaScript로 변환하려면 컴파일 단계가 필요합니다. 그러나 우리는 나중에 이것을 할 것입니다.

React가 사용자 인터페이스를 구축하는 데 편리한 이유는 데이터가 구성 요소의 상위 구성 요소에서 수신되거나 구성 요소 자체에 포함되어 있다는 것입니다. 코드로 넘어 가기 전에 구성 요소에 대한 높은 수준의 이해가 필요합니다.

위의 내 트위터 프로필 사진이 있습니다. React에서이 페이지를 다시 만들려면 다른 섹션을 다른 구성 요소 (강조 표시)로 나눕니다. 컴포넌트는 컴포넌트 안에 중첩 된 컴포넌트를 가질 수 있습니다.

왼쪽 컴포넌트 (분홍색)의 이름을 UserInfo 컴포넌트로 지정할 수 있습니다. UserInfo 컴포넌트 안에는 UserImages 컴포넌트를 호출 할 수있는 다른 컴포넌트 (오렌지)가 있습니다. 이 상위 / 하위 관계가 작동하는 방식은 UserInfo 구성 요소 또는 상위 구성 요소이며, 자체 및 UserImages 구성 요소 (하위 구성 요소)에 대한 데이터의 "상태"가 존재합니다. 하위 구성 요소에서 상위 구성 요소 데이터의 일부를 사용하려는 경우 해당 데이터를 하위 구성 요소에 속성으로 전달합니다. 이 예제에서는 UserImages 구성 요소에 사용자가 보유한 모든 이미지 (현재 UserInfo 구성 요소에 있음)를 전달합니다.

코드의 세부 사항에 대해 조금 더 자세히 살펴볼 것이지만 여기서 발생하는 큰 그림을 이해하고 싶습니다. 이 부모 / 자식 계층 구조는 데이터의 위치를 ​​정확히 알고 다른 곳에서는 데이터를 조작해서는 안되므로 데이터 관리를 비교적 간단하게 만듭니다.

아래 주제는 React의 기본 측면이라고 생각합니다. 모든 내용과 그 목적을 이해하면이 자습서를 읽은 후 매우 좋은 위치에있게됩니다.

JSX — 문법과 유사한 HTML을 작성할 수 있습니다.
경량 JavaScript 객체로 변환되었습니다.
가상 DOM — 실제의 JavaScript 표현
DOM.
React.Component — 새로운 컴포넌트를 만드는 방법.
render (메소드) — UI의 모양을 설명합니다
특정 구성 요소.
ReactDOM.render — React 컴포넌트를 DOM 노드로 렌더링합니다.
state — 구성 요소의 내부 데이터 저장소 (개체)입니다.
생성자 (this.state)-설정 방법
컴퍼넌트의 초기 상태
setState — 상태를 업데이트하는 데 사용되는 도우미 메서드
구성 요소 및 UI 다시 렌더링
props — 자식 구성 요소에 전달되는 데이터
부모 구성 요소에서.
propTypes — 존재 또는 유형을 제어 할 수 있습니다.
특정 소품이 자식 구성 요소에 전달되었습니다.
defaultProps — 구성 요소의 기본 소품을 설정할 수 있습니다.
구성품 수명주기
  -componentDidMount — 컴포넌트가 마운트 된 후 시작
  -componentWillUnmount — 구성 요소가 마운트 해제되기 전에 시작됩니다.
  -getDerivedStateFromProps-구성 요소가 마운트 될 때 시작되고
소품이 바뀔 때마다. 상태를 업데이트하는 데 사용
소품이 바뀔 때 구성 요소
행사
  -onClick
  -제출
  -변경

나는 그것이 많은 것처럼 보인다는 것을 알고 있지만 곧 React를 사용하여 강력한 응용 프로그램을 구축하는 데 각 조각이 어떻게 기본적인지 알게 될 것입니다 (그리고 나는 이것이 포괄적 인 가이드가되기를 원한다고 농담하지 않았습니다).

이 시점에서 React의 작동 방식을 매우 높은 수준으로 이해해야합니다. 이제 몇 가지 코드를 살펴 보겠습니다.

첫 번째 컴포넌트 작성 (JSX, Virtual DOM, 렌더링, ReactDOM.render)

계속해서 첫 번째 React 컴포넌트를 만들어 봅시다.

React 컴포넌트를 만들려면 ES6 클래스를 사용합니다. 수업에 익숙하지 않은 경우 아래에서 계속 읽거나 여기에서 더 자세히 읽을 수 있습니다.

'반응'에서 반응 가져 오기
'react-dom'에서 ReactDOM 가져 오기
HelloWorld 클래스는 React.Component {
  render () {
    반품 (
      
안녕하세요!     )   } }
ReactDOM.render (, document.getElementById ( 'root'));

클래스의 유일한 메소드는 render입니다. 모든 컴포넌트에는 렌더링 메소드가 있어야합니다. 렌더링의 이유는 컴포넌트의 UI (사용자 인터페이스)를 설명하기 때문입니다. 따라서이 예제에서이 컴포넌트가 렌더링되는 화면에 표시되는 텍스트는 Hello World!

이제 ReactDOM이하는 일을 살펴 보겠습니다. ReactDOM.render는 두 가지 인수를 사용합니다. 첫 번째 인수는 렌더링하려는 구성 요소이고 두 번째 인수는 구성 요소를 렌더링 할 DOM 노드입니다.

React.Render가 아닌 ReactDOM.render를 사용하고 있습니다. 이것은 React .14에서 React를 모듈화하기 위해 변경되었습니다. React가 단순한 DOM 요소보다 더 많은 것을 렌더링 할 수 있다고 생각할 때 이치에 맞습니다.

위의 예에서는 React에 HelloWorld 구성 요소를 가져 와서 ID가 root 인 요소에 렌더링하도록 지시합니다. 앞에서 언급 한 React의 부모 / 자식 관계 때문에 대부분의 부모 구성 요소를 렌더링하면 모든 자식 구성 요소도 렌더링되므로 응용 프로그램에서 ReactDOM.render를 한 번만 사용해야합니다.

이제이 시점에서 JavaScript에 "HTML"이 약간 이상하게 느껴질 수 있습니다. 웹 개발을 배우기 시작한 후에는 논리를 시야에서 벗어나야한다는 것, 즉 JavaScript와 JavaScript를 연결 해제해야한다는 말을 들었습니다.

이 패러다임은 강하지 만 몇 가지 약점이 있습니다. 이 튜토리얼이 더 이상이 아이디어가 올바른 방향으로 나아가는 단계임을 확신 시키려고하지 않기 때문에이 아이디어가 여전히 귀찮다면이 링크를 확인하십시오. React에 대해 더 많이 배우면이 불안감은 빨리 사라질 것입니다.

render 메소드로 작성하는 "HTML"은 실제로 HTML이 아니지만 React가 "JSX"라고 부르는 것입니다. JSX를 사용하면 HTML과 유사한 구문을 작성하여 최종적으로 가벼운 JavaScript 객체로 변환 할 수 있습니다. 그러면 React는 이러한 JavaScript 객체를 가져 와서 "가상 DOM"또는 실제 DOM의 JavaScript 표현을 형성합니다. 이것은 JavaScript의 힘으로 템플릿에 액세스 할 수있는 승 / 승 상황을 만듭니다.

아래 예제를 보면 JSX가 결국 컴파일 될 것입니다.

HelloWorld 클래스는 React.Component {
  render () {
    return React.createElement ( "div", null, "Hello World");
  }
}
이제 JSX-> JS 변환 단계를 무시하고 위 ​​코드와 같은 React 컴포넌트를 작성할 수 있습니다. 그러나 당신이 상상할 수 있듯이, 그것은 다소 까다로울 것입니다. JSX를 사용하지 않는 사람은 없습니다. JSX가 컴파일하는 것에 대한 자세한 정보는 React Elements와 React Components를 확인하십시오.

지금까지는 새로운 가상 DOM 패러다임의 중요성을 강조하지 않았습니다. React 팀 이이 접근법을 사용하는 이유는 가상 DOM이 실제 DOM의 JavaScript 표현이므로 React는 이전 가상 DOM을 사용하여 현재 가상 DOM (일부 데이터 변경 후 계산)의 차이를 추적 할 수 있기 때문입니다. (일부 데이터가 변경되기 전에 계산). 그런 다음 React는 이전 가상 DOM과 새 가상 DOM 간의 변경 사항을 격리 한 다음 필요한 변경 사항으로 실제 DOM 만 업데이트합니다.

좀 더 일반인의 관점에서 보면 실제 DOM 조작이 느리기 때문에 React는 가상 DOM을 추적하고 필요한 경우에만 필요한 변경만으로 실제 DOM을 업데이트함으로써 실제 DOM에 대한 조작을 최소화 할 수 있습니다. (자세한 내용은 여기).

일반적으로 UI에는 상태를 관리하기 어려운 상태가 많이 있습니다. 상태가 변경 될 때마다 가상 DOM을 다시 렌더링하면 React를 통해 응용 프로그램의 상태를 쉽게 파악할 수 있습니다. 프로세스는 다음과 같습니다.

앱 상태를 변경하는 일부 사용자 이벤트 → 가상 DOM 다시 렌더링 → 새 가상 DOM으로 이전 가상 DOM 차이점 → 필요한 변경으로 실제 DOM 만 업데이트합니다.

JSX에서 JS 로의 변환 프로세스가 있으므로 개발할 때 일종의 변환 단계를 설정해야합니다. 이 시리즈의 2 부에서는 이러한 변환을위한 Webpack 및 Babel을 소개합니다.

"React의 가장 중요한 부분"체크리스트를 다시 살펴보고 현재 위치를 봅시다.

X JSX — HTML과 같은 구문을 작성할 수 있습니다.
경량 JavaScript 객체로 변환되었습니다.
DOM 가상 DOM — 실제의 JavaScript 표현
DOM.
 React.Component — 새 구성 요소를 만드는 방법입니다.
(render (메소드) — UI의 모양을 설명합니다
특정 구성 요소.
act ReactDOM.render — React 컴포넌트를 DOM 노드로 렌더링합니다.
state — 구성 요소의 내부 데이터 저장소 (개체)입니다.
생성자 (this.state)-설정 방법
컴퍼넌트의 초기 상태
setState — 상태를 업데이트하는 데 사용되는 도우미 메서드
구성 요소 및 UI 다시 렌더링
props — 자식 구성 요소에 전달되는 데이터
부모 구성 요소에서.
propTypes — 존재 또는 유형을 제어 할 수 있습니다.
특정 소품이 자식 구성 요소에 전달되었습니다.
defaultProps — 구성 요소의 기본 소품을 설정할 수 있습니다.
구성품 수명주기
  -componentDidMount — 컴포넌트가 마운트 된 후 시작
  -componentWillUnmount — 구성 요소가 마운트 해제되기 전에 시작됩니다.
  -getDerivedStateFromProps-구성 요소가 마운트 될 때 시작되고
소품이 바뀔 때마다. 상태를 업데이트하는 데 사용
소품이 바뀔 때 구성 요소
행사
  -onClick
  -제출
  -변경

우리는 좋은 페이스를 만들고 있습니다. 굵게 표시된 내용은 이미 다룬 내용이므로 적어도 특정 구성 요소가 React 에코 시스템에 어떻게 적용되는지 설명 할 수 있어야합니다.

컴포넌트에 상태 추가 (상태)

목록의 다음은 상태입니다. 앞에서 우리는 사용자 인터페이스 관리가 어려운 상황에 대해 이야기했습니다. 이 영역은 React가 실제로 빛나기 시작하는 곳입니다. 각 구성 요소는 자체 상태를 관리하고 필요한 경우 상태를 하위 구성 요소로 전달할 수 있습니다.

이전의 Twitter 예제로 돌아가서 UserInfo 구성 요소 (위의 분홍색으로 강조 표시)는 사용자 정보의 상태 (또는 데이터)를 관리합니다. 다른 구성 요소에도이 상태 / 데이터가 필요했지만 해당 상태가 UserInfo 구성 요소의 직접적인 자식이 아닌 경우 UserInfo의 직접 부모 및 다른 구성 요소 (또는 해당 상태를 필요로하는 두 구성 요소) 인 다른 구성 요소를 만듭니다. ). 그런 다음 하위 구성 요소에 소품으로 상태를 전달합니다. 즉, 다중 구성 요소 계층 구조가있는 경우 공통 상위 구성 요소는 상태를 관리하고 소품을 통해 하위 구성 요소로 전달해야합니다.

내부 상태를 사용하여 예제 구성 요소를 살펴 보겠습니다.

HelloUser 클래스는 React.Component {
  생성자 (소품) {
    슈퍼 (소품)
this.state = {
      사용자 이름 : 'tylermcginnis'
    }
  }
  render () {
    반품 (
      
        안녕하세요 {this.state.username}            )   } }

이 예에서는 새로운 구문을 소개했습니다. 가장 먼저 눈에 띄는 것은 생성자 메서드입니다. 위의 정의에서 생성자 메서드는“구성 요소의 상태를 설정하는 방법”입니다. 즉, 생성자 내부에 this.state에 입력 한 모든 데이터는 해당 구성 요소 상태의 일부가됩니다.

위의 코드에서 구성 요소에 사용자 이름을 추적하고 싶다고 알려줍니다. 이 사용자 이름은 이제 {this.state.username}을 수행하여 컴포넌트 내에서 사용할 수 있습니다. 이는 정확히 렌더링 방법에서 수행하는 작업입니다.

상태와 마지막으로 이야기 할 것은 컴포넌트가 자체 내부 상태를 수정할 수있는 능력이 필요하다는 것입니다. 이를 위해 setState라는 메소드를 사용합니다. 데이터가 변경 될 때마다 가상 돔을 다시 렌더링하는 것에 대해 이야기했을 때를 기억하십니까?

앱에 일부 데이터가 변경되었음을 알리는 신호 → 가상 DOM 다시 렌더링 → 새로운 가상 DOM으로 이전 가상 DOM 차이점 → 필요한 변경으로 실제 DOM 만 업데이트하십시오.

"앱에 일부 데이터가 변경되었음을 알리는 신호"는 실제로는 setState입니다. setState가 호출 될 때마다 가상 DOM이 다시 렌더링되고 diff 알고리즘이 실행되며 실제 DOM이 필요한 변경 사항으로 업데이트됩니다.

참고로, 아래 코드에서 setState를 소개하면 목록에있는 몇 가지 이벤트도 소개합니다. 새 두 마리, 돌 하나.

다음 코드 샘플에서는 누군가 입력 할 때마다 상태를 자동으로 업데이트하고 사용자 이름을 변경하는 입력 상자를 갖게됩니다.

HelloUser 클래스는 React.Component {
  생성자 (소품) {
    슈퍼 (소품)
this.state = {
      사용자 이름 : 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (this)
  }
  handleChange (e) {
    this.setState ({
      사용자 이름 : e.target.value
    })
  }
  render () {
    반품 (
      
        안녕하세요 {this.state.username}
        이름을 바꿔라:         <입력           type = "text"           value = {this.state.username}           onChange = {this.handleChange}         />            )   } }

몇 가지 더 소개했습니다. 첫 번째는 handleChange 메소드입니다. 이 메소드는 사용자가 입력 상자에 입력 할 때마다 호출됩니다. handleChange가 호출되면 setState를 호출하여 입력 상자에 입력 한 내용 (예 : target.value)으로 사용자 이름을 다시 정의합니다. setState가 호출 될 때마다 React는 새 가상 DOM을 작성하고 diff를 수행 한 다음 실제 DOM을 업데이트합니다.

이제 렌더링 방법을 살펴 보겠습니다. 입력 필드가 포함 된 줄을 새로 추가했습니다. 입력 필드의 유형은 분명히 텍스트입니다. 값은 원래 getInitialState 메소드에서 정의되었고 handleChange 메소드에서 업데이트 될 사용자 이름의 값이됩니다.

이전에는 볼 수 없었던 새로운 속성 인 onChange가 있습니다. onChange는 React 일이며 입력 상자의 값이 변경 될 때마다 지정한 메소드를 호출합니다.이 경우 지정한 메소드는 handleChange입니다.

위의 코드 프로세스는 다음과 같습니다.

사용자가 입력 상자에 입력 → handleChange가 호출 됨 → 컴포넌트 상태가 새 값으로 설정 됨 → React가 가상 DOM을 다시 렌더링합니다. → React 변경을 변경합니다. → Real DOM이 업데이트됩니다.

나중에 소품을 다루면 처리 상태에 대한 고급 사용 사례가 표시됩니다.

우리는 거기에 도착하고있다! 아래에서 굵게 표시된 항목을 설명 할 수 없으면 해당 섹션을 다시 읽으십시오. REALLY learning에 대한 한 가지 팁 React :이 내용을 수동으로 읽으면 실제로 무슨 일이 일어나고 있는지 알고 실제로하는 일을 다시 만들 수 있다는 잘못된 보안 감각을 갖게하지 마십시오. CodeSandbox로 가서 내가 한 일을 보지 않고 구성 요소를 다시 만들거나 직접 만들어보십시오. React로 구축하는 방법을 배우기 시작하는 유일한 방법입니다. 이것은이 튜토리얼과 다음에 올 것입니다.

X JSX — HTML과 같은 구문을 작성할 수 있습니다.
경량 JavaScript 객체로 변환되었습니다.
DOM 가상 DOM — 실제의 JavaScript 표현
DOM.
 React.Component — 새 구성 요소를 만드는 방법입니다.
(render (메소드) — UI의 모양을 설명합니다
특정 구성 요소.
act ReactDOM.render — React 컴포넌트를 DOM 노드로 렌더링합니다.
 state — 구성 요소의 내부 데이터 저장소 (개체)입니다.
 생성자 (this.state)-설정 방법
컴퍼넌트의 초기 상태
State setState — 상태를 업데이트하는 데 사용되는 도우미 메서드
구성 요소 및 UI 다시 렌더링
props — 자식 구성 요소에 전달되는 데이터
부모 구성 요소에서.
propTypes — 존재 또는 유형을 제어 할 수 있습니다.
특정 소품이 자식 구성 요소에 전달되었습니다.
defaultProps — 구성 요소의 기본 소품을 설정할 수 있습니다.
구성품 수명주기
  -componentDidMount — 컴포넌트가 마운트 된 후 시작
  -componentWillUnmount — 구성 요소가 마운트 해제되기 전에 시작됩니다.
  -getDerivedStateFromProps-구성 요소가 마운트 될 때 시작되고
소품이 바뀔 때마다. 상태를 업데이트하는 데 사용
소품이 바뀔 때 구성 요소
행사
  -onClick
  -제출
  -변경

부모 구성 요소에서 상태 받기 (props, propTypes, getDefaultProps)

소품없이 실제로 많은 것을하기가 어렵 기 때문에 소품에 대해 이미 몇 번 이야기했습니다. 위에서 정의한 것처럼 props는 부모 구성 요소에서 자식 구성 요소로 전달되는 데이터입니다. 이를 통해 React 아키텍처는 매우 간단합니다. 특정 데이터를 사용해야하는 최상위 상위 구성 요소의 상태를 처리하고 해당 데이터가 필요한 하위 구성 요소가있는 경우 해당 데이터를 소품으로 전달하십시오.

소품을 사용하는 매우 기본적인 예는 다음과 같습니다.

HelloUser 클래스는 React.Component {
  render () {
    반품 (
      
안녕하세요, {this.props.name}     )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'root')
);

9 행에는 값이 "Tyler"인 name이라는 속성이 있습니다. 이제 컴포넌트에서 {this.props.name}을 사용하여 "Tyler"를 얻을 수 있습니다.

보다 발전된 예를 살펴 보겠습니다. 이제 두 가지 구성 요소가 있습니다. 한 부모, 한 자녀. 부모는 상태를 추적하고 해당 상태의 일부를 소품으로 자식에게 전달합니다. 먼저 해당 상위 구성 요소를 살펴 보겠습니다.

부모 구성 요소 :

FriendsContainer 클래스는 React.Component {
  생성자 (소품) {
    슈퍼 (소품)
this.state = {
      이름 : '타일러 맥기니스',
      친구: [
        제이크 링월
        '사라 드라 즈너',
        '메릭 크리스텐슨'
      ]
    }
  }
  render () {
    반품 (
      
        

이름 : {this.state.name}                     )   } }

우리가 전에 보지 못했던이 구성 요소에는 실제로 많은 일이 일어나지 않습니다. 초기 상태가 있으며 해당 초기 상태의 일부를 다른 구성 요소로 전달합니다. 새로운 코드의 대부분은이 하위 구성 요소에서 나올 것이므로 자세히 살펴 보겠습니다.

하위 구성 요소 :

ShowList 클래스는 React.Component {
  render () {
    반품 (
      
        

친구         
              {this.props.names.map ((friend) =>
  • {friend} )}                     )   } }

render 메소드에서 리턴되는 코드는 실제 DOM의 모습을 나타냅니다. Array.prototype.map에 익숙하지 않은 경우이 코드가 약간 이상하게 보일 수 있습니다. 모든지도는 새로운 배열을 생성하고 배열의 각 항목에서 콜백 함수를 호출하고 각 항목에서 콜백 함수를 호출 한 결과로 새 배열을 채 웁니다. 예를 들어

const friends = [
  제이크 링월
  '사라 드라 즈너',
  '메릭 크리스텐슨'
];
const listItems = friends.map ((친구) => {
  "
  • "+ friend + ""반환; });
  • console.log (listItems);

    위의 console.log는 [ "", "

  • Murphy Randall ", "
  • Merrick Christensen "]을 반환합니다.

    우리는 새로운 배열을 만들고 원래 배열의 각 항목에

  • 을 추가했다는 사실에 주목하십시오.

    지도의 장점은 React에 완벽하게 들어 맞고 JavaScript에 내장되어 있다는 것입니다. 위의 하위 구성 요소에서 이름을 매핑하고 각 이름을

  • 태그 쌍으로 래핑 한 다음 listItems 변수에 저장합니다. 그런 다음 render 메소드는 모든 친구들과 순서가없는 목록을 반환합니다.

    소품에 대한 이야기를 중단하기 전에 한 가지 예를 더 살펴 보겠습니다. 데이터가 어디에 있든 해당 데이터를 조작하려는 정확한 장소라는 것을 이해하는 것이 중요합니다. 이렇게하면 데이터에 대한 추론이 간단 해집니다. 특정 데이터에 대한 모든 getter / setter 메소드는 항상 해당 데이터가 정의 된 동일한 구성 요소에 있습니다. 데이터가있는 곳 밖에서 일부 데이터를 조작해야하는 경우 getter / setter 메서드를 해당 구성 요소에 소품으로 전달합니다. 그와 같은 예를 살펴 보겠습니다.

    FriendsContainer 클래스는 React.Component {
      생성자 (소품) {
        슈퍼 (소품)
    this.state = {
          이름 : '타일러 맥기니스',
          친구: [
            제이크 링월
            '사라 드라 즈너',
            '메릭 크리스텐슨'
          ],
        }
    this.addFriend = this.addFriend.bind (this)
      }
      addFriend (친구) {
        this.setState ((state) => ({
          친구 : state.friends.concat ([friend])
        }))
      }
      render () {
        반품 (
          
            

    이름 : {this.state.name}                              )   } }

    . addFriend 메소드에서 setState를 호출하는 새로운 방법을 도입했습니다. 객체를 전달하는 대신 상태를 전달하는 함수를 전달합니다. 이전 상태를 기반으로 컴포넌트의 새 상태를 설정할 때마다 (friends 배열로 수행 할 때) setState에 현재 상태를 가져오고 새 데이터와 병합 할 데이터를 반환하는 함수를 전달하려고합니다. 상태. 여기서 확인하십시오.
    AddFriend 클래스는 React.Component {
      생성자 (소품) {
        슈퍼 (소품)
    this.state = {
          새 친구: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (this)
        this.handleAddNew = this.handleAddNew.bind (this)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend : e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          새 친구: ''
        })
      }
      render () {
        반품 (
          
            <입력           type = "text"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />         
    ShowList 클래스는 React.Component {
      render () {
        반품 (
          
            

    친구         
                {this.props.names.map ((friend) => {             
    • {friend} 로 돌아 가기           })}                     )   } }

    위의 코드는 이전 예제와 거의 동일하지만 친구 목록에 이름을 추가 할 수 있다는 점을 제외하고는 추가 할 새 친구를 관리하는 새 AddFriend 구성 요소를 어떻게 작성했는지 확인하십시오.

    그 이유는 부모 구성 요소 (FriendContainer)가 추가중인 새 친구를 신경 쓰지 않고 전체 친구 (전체 친구 배열) 만 신경 쓰기 때문입니다. 그러나 우리는 관심있는 구성 요소에서 데이터를 조작하는 규칙만을 고수하고 있기 때문에 addFriend 메소드를 AddFriend 구성 요소에 소품으로 전달했으며 핸들로 한 번 새 친구와 함께 호출합니다. 메소드가 호출됩니다.

    이 시점에서 3 ~ 4 분 동안 멈춘 후에는 위의 코드를 가이드로 사용하여 동일한 기능을 스스로 다시 작성하는 것이 좋습니다.

    소품으로 넘어 가기 전에 소품에 관한 두 가지 더 많은 React 기능을 다루고 싶습니다. propTypes 및 defaultProps입니다. 둘 다 매우 간단하기 때문에 여기서 자세히 설명하지 않겠습니다.

    prop-type을 사용하면 존재 또는 하위 구성 요소에 전달 된 특정 prop의 유형을 제어 할 수 있습니다. propTypes를 사용하면 특정 소품이 필요하거나 특정 소품이 특정 유형이되도록 지정할 수 있습니다.

    React 15부터 PropTypes는 더 이상 React 패키지에 포함되지 않습니다. npm install prop-types를 실행하여 별도로 설치해야합니다.

    defaultProps를 사용하면 특정 소품이 구성 요소에 전달되지 않은 경우를 대비하여 특정 소품에 대한 기본값 (또는 백업) 값을 지정할 수 있습니다.

    addFriend가 함수이고 AddFriend 구성 요소로 전달되도록 propTypes를 사용하여 이전부터 지금까지 구성 요소를 수정했습니다. 또한 defaultProps를 사용하여 ShowList 구성 요소에 친구 배열이 제공되지 않으면 기본적으로 빈 배열로 지정됩니다.

    '반응'에서 반응 가져 오기
    'prop-types'에서 PropTypes 가져 오기
    AddFriend 클래스는 React.Component {
      생성자 (소품) {
        슈퍼 (소품)
    this.state = {
          새 친구: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend : e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          새 친구: ''
        })
      }
      render () {
        반품 (
          
            <입력           type = "text"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />         
    AddFriend.propTypes : {
      addNew : PropTypes.func.isRequired
    }
    ShowList 클래스는 React.Component {
      render () {
        반품 (
          
            

    친구         
                {this.props.names.map ((friend) => {             
    • {friend} 로 돌아 가기           })}                     )   } }

    ShowList.defaultProps = {
      이름 : []
    }

    자,이 첫 튜토리얼의 마지막 단계에 있습니다. 가이드를 살펴보고 남은 내용을 살펴 보겠습니다.

    X JSX — HTML과 같은 구문을 작성할 수 있습니다.
    경량 JavaScript 객체로 변환되었습니다.
    DOM 가상 DOM — 실제의 JavaScript 표현
    DOM.
     React.Component — 새 구성 요소를 만드는 방법입니다.
    (render (메소드) — UI의 모양을 설명합니다
    특정 구성 요소.
    act ReactDOM.render — React 컴포넌트를 DOM 노드로 렌더링합니다.
     state — 구성 요소의 내부 데이터 저장소 (개체)입니다.
     생성자 (this.state)-설정 방법
    컴퍼넌트의 초기 상태
    State setState — 상태를 업데이트하는 데 사용되는 도우미 메서드
    구성 요소 및 UI 다시 렌더링
     props — 자식 구성 요소로 전달되는 데이터
    부모 구성 요소에서.
     propTypes — 존재 또는 유형을 제어 할 수 있습니다.
    특정 소품이 자식 구성 요소에 전달되었습니다.
     defaultProps — 컴포넌트의 기본 소품을 설정할 수 있습니다.
    구성품 수명주기
      -componentDidMount — 컴포넌트가 마운트 된 후 시작
      -componentWillUnmount — 구성 요소가 마운트 해제되기 전에 시작됩니다.
      -getDerivedStateFromProps-구성 요소가 마운트 될 때 시작되고
    소품이 바뀔 때마다. 상태를 업데이트하는 데 사용
    소품이 바뀔 때 구성 요소
     행사
      -onClick
      -제출
      -변경

    우리는 너무 가깝습니다!

    구성품 수명주기

    각 구성 요소에는 다양한 용도에 유용한 고유 한 수명주기 이벤트가 있습니다. 예를 들어, 초기 렌더링에서 아약스 요청을하고 일부 데이터를 가져 오려면 어떻게해야합니까? 또는 소품이 바뀔 때마다 논리를 실행하려면 어떻게해야합니까? 다른 수명주기 이벤트는 두 가지 모두에 대한 답변입니다. 그들을 분해하자.

    App이 React.Component를 확장 함 {
      생성자 (소품) {
        슈퍼 (소품)
    this.state = {
          이름 : '타일러 맥기니스'
        }
      }
      componentDidMount () {
        // 컴포넌트가 DOM에 마운트되면 호출됩니다.
        // AJAX 요청에 적합
      }
      정적 getDerivedStateFromProps (nextProps, prevState) {
        //이 함수에서 반환 한 객체는
        // 현재 상태와 병합됩니다.
      }
      componentWillUnmount () {
        // 컴포넌트를 마운트 해제하기 전에 즉시 호출
        // 청취자 정리에 좋습니다.
      }
      render () {
        반품 (
          
            안녕하세요, {this.state.name}            )   } }

    componentDidMount — 초기 렌더링 후 한 번 호출됩니다. 이 메소드가 호출 될 때 컴포넌트가 이미 호출되었으므로 필요한 경우 가상 DOM에 액세스 할 수 있습니다. this.getDOMNode ()를 호출하면됩니다. 이것이 AJAX에서 일부 데이터를 가져 오도록 요청하는 라이프 사이클 이벤트입니다.

    componentWillUnmount —이 수명주기는 구성 요소를 DOM에서 마운트 해제하기 직전에 호출됩니다. 여기에서 필요한 정리 작업을 수행 할 수 있습니다.

    getDerivedStateFromProps — 전달되는 소품에 따라 구성 요소의 상태를 업데이트해야하는 경우가 있습니다. 이것이 수행되는 수명주기 방법입니다. 소품과 상태가 전달되고 반환 한 객체가 현재 상태와 병합됩니다.

    글쎄,이 시점까지 나와 함께한다면 정말 잘 했어. 이 튜토리얼이 도움이 되셨기를 바랍니다. 이제 적어도 React에 대해 약간의 편안함을 느낍니다.

    React의 기본 사항에 대해 자세히 알아 보려면 React Fundamentals 과정을 확인하십시오.

    타일러 맥기니스