React
컴포넌트 라이프 사이클 대응

소개

구성 요소 생성

React 구성 요소가 만들어지면 많은 함수가 호출됩니다.

• React.createClass (ES5)를 사용하는 경우 5 개의 사용자 정의 함수가 호출됩니다.
• class Component extends React.Component (ES6)를 사용하는 경우 3 개의 사용자 정의 함수가 호출됩니다.

getDefaultProps() (ES5 만 해당)

이것은 첫 번째 호출 메소드입니다.

이 함수가 반환하는 Prop 값은 구성 요소가 인스턴스화 될 때 정의되지 않은 경우 기본값으로 사용됩니다.

다음 예에서 this.props.name 은 달리 지정되지 않은 경우 기본적으로 Bob 됩니다.

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (ES5 만 해당)

이것은 두 번째 호출 된 메서드입니다.

getInitialState() 의 반환 값은 React 구성 요소의 초기 상태를 정의합니다. React 프레임 워크는이 함수를 호출하고 반환 값을 this.state 할당합니다.

다음 예제에서 this.state.count 는 this.props.initialCount 값으로 초기화됩니다.

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 및 ES6)

이것은 세 번째 호출 된 메서드입니다.

이 함수는 DOM에 추가되기 전에 구성 요소를 최종적으로 변경하는 데 사용할 수 있습니다.

componentWillMount() {
  ...
}

render() (ES5 및 ES6)

이것은 네 번째 호출 메소드입니다.

render() 함수는 구성 요소의 상태와 소품의 순수 함수 여야합니다. 렌더링 프로세스 동안 구성 요소를 나타내는 단일 요소를 반환하며 네이티브 DOM 구성 요소 (예 : <p /> ) 또는 복합 구성 요소 중 하나를 나타내야합니다. 아무것도 렌더링하지 않으면 null 또는 undefined 반환 할 수 있습니다.

이 기능은 구성 요소의 소품 또는 상태를 변경 한 후에 호출됩니다.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 및 ES6)

이것이 다섯 번째 방법입니다.

구성 요소가 마운트되었고 이제는 refs 를 통해 구성 요소의 DOM 노드에 액세스 할 수 있습니다.

이 방법은 다음 용도로 사용되어야합니다.

• 타이머 준비 중
• 데이터를 가져 오는 중
• 이벤트 리스너 추가
• DOM 요소 조작

componentDidMount() {
  ...
}

ES6 구문

구성 요소가 ES6 클래스 구문을 사용하여 정의 된 경우 getDefaultProps() 및 getInitialState() 함수를 사용할 수 없습니다.

대신 defaultProps 를 클래스의 정적 속성으로 선언하고 클래스의 생성자에서 상태 모양과 초기 상태를 선언합니다. 이들은 다른 모든 React 생명주기 함수가 호출되기 전에, 건설 시간에 클래스의 인스턴스에 설정됩니다.

다음 예제에서는이 대체 방법을 보여줍니다.

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getDefaultProps() 대체하기

구성 요소 소품의 기본값은 클래스의 defaultProps 속성을 설정하여 지정합니다.

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getInitialState() 대체하기

구성 요소의 초기 상태를 설정하는 관용적 인 방법은 this.state 를 생성자에 설정하는 것입니다.

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

구성 요소 업데이트

componentWillReceiveProps(nextProps)

이것은 속성 변경시 호출 되는 첫 번째 함수 입니다.

구성 요소의 속성이 변경 되면 React는이 속성을 새 속성으로 호출 합니다 . this.props로 이전 소품에 액세스하고 nextProps로 새 소품에 액세스 할 수 있습니다.

이러한 변수를 사용하면 이전 및 새 소품 사이의 비교 작업을 수행하거나 속성 변경 등으로 인해 함수를 호출 할 수 있습니다.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

이것은 속성 변경시 호출 되는 두 번째 함수이며 첫 번째 상태 변경시 입니다.

기본적으로 다른 구성 요소 / 구성 요소가 구성 요소의 속성 / 상태를 변경하면 React 는 구성 요소의 새 버전을 렌더링합니다. 이 경우이 함수는 항상 true를 반환합니다.

이 기능을 무시하고 구성 요소를 업데이트해야하는지 여부를보다 정확하게 선택할 수 있습니다.

이 함수는 주로 최적화에 사용됩니다.

함수가 false를 반환하면 업데이트 파이프 라인이 즉시 중지됩니다 .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

이 함수는 componentWillMount() 와 같이 작동합니다. 변경 사항은 DOM 에 없으므로 업데이트가 수행되기 전에 변경 작업을 수행 할 수 있습니다.

/! \ : this.setState ()를 사용할 수 없습니다.

componentWillUpdate(nextProps, nextState){}

render()

몇 가지 변경 사항이 있으므로 구성 요소를 다시 렌더링하십시오.

componentDidUpdate(prevProps, prevState)

componentDidMount() 와 동일한 기능 : DOM이 새로 고쳐 지므로 여기에서 DOM에 대한 작업을 수행 할 수 있습니다.

componentDidUpdate(prevProps, prevState){}

구성 요소 제거

componentWillUnmount()

이 메소드는, 컴퍼넌트가 DOM로부터 언 마운트 되기 전에 불려갑니다.

다음과 같은 청소 작업을 수행하는 것이 좋습니다.

• 이벤트 리스너 제거
• 타이머 지우기.
• 소켓을 멈추는 중입니다.
• redux 상태를 정리.

componentWillUnmount(){
  ...
}

componentWillUnMount 에서 연결된 이벤트 리스너를 제거하는 예제

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

반응 성분 컨테이너

React 어플리케이션을 구축 할 때, 주요한 책임에 따라 컴포넌트를 Presentational 및 Container 컴포넌트로 나누는 것이 종종 바람직합니다.
프레젠테이션 구성 요소는 데이터를 표시하는 것과 관련이 있습니다. 모델을보기로 변환하는 기능으로 간주 될 수 있으며 종종 구현됩니다. 일반적으로 내부 상태는 유지되지 않습니다. 컨테이너 구성 요소는 데이터 관리와 관련이 있습니다. 이것은 자신의 주를 통해 내부적으로 수행되거나 Redux와 같은 국가 관리 라이브러리와 중개자 역할을 수행 할 수 있습니다. 컨테이너 구성 요소는 데이터를 직접 표시하지 않고 데이터를 프레젠테이션 구성 요소로 전달합니다.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

서로 다른 상태의 라이프 사이클 메소드 호출

이 예제는 라이프 사이클 메소드를 사용하는 방법과 메소드가 호출 될 때의 다른 예제를 보완하는 역할을합니다.

이 예제는 어떤 메소드 (componentWillMount, componentWillReceiveProps 등)가 호출되는지, 그리고 다른 상태 의 컴포넌트 에 대해 어떤 순서가 다른지 요약 합니다 .

구성 요소가 초기화 될 때 :

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. 세우다
5. componentDidMount

구성 요소의 상태가 변경된 경우 :

1. shouldComponentUpdate
2. componentWillUpdate
3. 세우다
4. componentDidUpdate

구성 요소에 소품이 변경된 경우 :

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. 세우다
5. componentDidUpdate

구성 요소가 마운트 해제 될 때 :

1. componentWillUnmount