ㄷㅣㅆㅣ's Amusement

[React] Component Lifecycle - 리액트 컴포넌트 생명주기 본문

Programming/React

[React] Component Lifecycle - 리액트 컴포넌트 생명주기

ㄷㅣㅆㅣ 2016. 4. 22. 11:17

[React] Component Lifecycle - 리액트 컴포넌트 생명주기

React의 라이프 사이클 메소드는 컴포넌트 안드로이드나 iOS와 같이 사용 단계에 맞는 후킹 기법을 제공한다.


초기화


  • getDefaultProps
    • 인스턴스를 생성하는 시점에 딱 한 번 호출.
    • 복제되는 것이 아니며, 하나의 값을 모든 인스턴스가 공유한다.
  • getInitialState
    • 인스턴스를 생성할 때마다 호출.
    • 이 시점부터 this.props에 접근 가능.
  • componentWillMount
    • 최초 렌더링 직전에 호출.
    • 렌더링 하기 전 컴포넌트 상태에 영향을 줄 수 있는 마지막 단계
  • render
    • 컴포넌트를 나타내는 가상 DOM을 만든다.
    • React는 이 메소드에서 가상 표현 객체를 실제 DOM과 비교하여 변경할 부분이 있는지 확인한다.
    • 필수 작성 메소드이며 다음과 같은 작성 규칙을 따른다.
      • 접근은 this.props, this.state만 된다.
      • 엘리먼트 배열을 제외한 모든 React Component를 반환할 수 있다.
      • 컴포넌트 상태를 변경하거나 DOM을 수정할수는 없다.
  • componentDidMount
    • render 메소드가 이상없이 실행되어 DOM이 렌더링 된 경우 this.getDomNode()로 실제 DOM에 접근하여 다음과 같은 동작이 가능하다.
      • 렌더링 결과물의 높이값을 확인하거나 타이머를 이용해 조작하는 등의 행위
      • jQuery 플러그인 적용
      • 서버에서 컴포넌트를 렌더링한 때에는 호출되지 않는다.


실행시 (runtime)


  • componentWillReceiveProps
    • 컴포넌트의 props는 부모 컴포넌트에서 언제든 변경 가능하고, 이 경우 호출된다.
  • shouldComponentUpdate
    • 변경한 props나 state에 따라 컴포넌트 자신이나 자식 컴포넌트를 렌더링할 필요가 있는지를 리턴한다.
    • 렌더링 초기화시나 forceUpdate를 사용한 후에는 호출되지 않는다.
    • 대부분의 경우는 사용할 일이 없음.
    • PureRenderMixin은 자동으로 이 메소드를 이용하여 state와 props를 얕게 비교, 동일하면 false를 리턴하여 성능을 개선한다.
  • componentWillUpdate
    • 새로운 props와 state가 전달되어 다시 렌더링하기 직전에 호출됨. (componentWillMount와 유사)
    • props나 state값은 변경할 수 없다. (변경은 componentWillReceiveProps를 이용)
  • componentDidUpdate
    • 렌더링이 끝난 DOM을 변경할 수 있다. (componentDidMount와 유사)

분해/정리

  • componentWillUnmount
    • 컴포넌트를 제거하기 직전에 호출.
    • componentDidMount에서 타이머나 리스너를 추가했다면 이곳에서 해제한다.


0 Comments
댓글쓰기 폼