[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에서 타이머나 리스너를 추가했다면 이곳에서 해제한다.