리액트-Lifecycle

REACT Life Cycle

리액트 처음 시작할때 어려운 부분일 수 있는 life cycle에 대해서 정리해보겠씀다

1. 컴포넌트가 DOM 위에 생성되기 전 후 
2. 상태를 업데이트하기 전 후 
3. 컴포넌트가 사라지기 전 

에 실행되는 메소드

컴포넌트 주기

1. componentWillMount 

• 렌더링 되기 전

2. componentDidMount

• 렌더링 된 후

-렌더링이란?

참고 : http://meetup.toast.com/posts/110

컴포넌트의 Props나 State의 변경이 있을 때 React는 컴포넌트의 이전 상태 엘리먼트와 새로 만들어진 엘리먼트를 비교하고 실제 DOM의 업데이트 여부를 결정한다. 엘리먼트를 비교하여 찾은 변경 점에 대해서만 갱신하는 것이다.

그리고 엘리먼트는 기본적으로 Immutable이기 때문에 속성들(Props)을 직접 수정할 수 없다. 각 렌더링에 항상 새로운 엘리먼트(DOM Node가 아닌 일반 객체라는 점을 잊지 말자.)를 만든다. 엘리먼트는 영상의 한 프레임과 같다고 생각하면 된다.

ReactDOM.render(
  element,
  document.getElementById('root')
);

위의 코드는 ReactDOM.render() API로 렌더링을 수행한다. 하지만 매번 모든 변화에 대해서 직접 ReactDOM.render()를 호출할 필요는 없다. 컴포넌트의 setState() 메서드가 수행되면 해당 컴포넌트를 변경 대상 컴포넌트(Dirty component)로 등록하고, 다음 이벤트 루프에서 배치 작업으로 대상 컴포넌트들의 엘리먼트를 렌더링한다.

이런 React의 렌더링을 쪼개보면 변경 점을 찾는 과정(Reconciliation의 Diffing 알고리즘)과, 변경 점을 실제 UI에 적용하는 작업으로 나눌 수 있다. 브라우저 기준으로는 React-core의 Reconciliation 작업과 DOM 조작 작업(ReactDOMComponent.updateComponent)으로 생각할 수 있다.

3.componentWillRecieveProps

• 새로운 props를 받았을때

4.shouldComponentUpdate

• 컴포넌트가 업데이트를 해야할지 말아야할지

5.componentWillUpdate

• 컴포넌트가 업데이트 되기전

6.componentDidUpdate

• 컴포넌트가 업데이트 된 다음

7.componentWillUnmount

• 컴포넌트가 제거 된 다음

아래 사진은 컴포넌트 주기와 관련된 사진인데, velopert 님의 강의에서 따온 사진이다. 한눈에 이해하기 편해서 사진을 첨부해보았다. 

컴포넌트 주기에 대한 상세 설명

• constructor

-컴포넌트가 처음 만들어질때 실행된다. 기본 state를 설정할 수 있다. 

constructor(props){
  super(props);
  console.log("constructor")
}

super(props)로 감싸주는 이유는

When you want to access this.props in constructor.라고 stackoverflow에 검색하니 나와 있었다 this.props 와 같이 props를 접근하기 위해선 위와 같은 감싸주는 과정이 필요한것이다.

• componentwillmount

-컴포넌트가 DOM  위에 만들어지기 전에 실행된다.

• componentDidMount

-첫 렌더링 마치고 실행된다. 이안에서 다른 자바스크립트 프레임워크 연동 및 setTimeOut, setInterval 및 AJAX사용

• componentWillReceiveProps

-props를 받을때 실행된다. props에 따라 state를 업데이트 할때 사용하면 유용하다. 이안에서 setState를 해도 괜찮다.

• shouldComponentUpdate

-props/state가 변경되었을 때 리렌더링을 할지말지 정한다. 실제로 사용할때는 필요한 비교를 하고 값을 반환해야 한다.

ex) return nextProps.id !== this.props.id

Json.stringify를 사용하여 여러 field를 편하게 비교하면 용이하다.

• componentWillUpdate

-여기서 setState를 하게되면 무한루프에 빠지게 된다.

WHY? 렌더링 된후 시작되는주기인데 setState를 하게되면 다시 리렌더링이 되고, 계속적으로 이주기로 들어가게되기 때문이다.

• componentDidUpdate

-컴포넌트가 리렌더링을 마친후 실행된다. 여기서도 setState를 사용하지말것

• componentWillUnmount

-컴포넌트가 DOM 사라진후 실행된다.

주기가 정말 많다하하하하하하 하지만 잘알고 있으면 리액트로 하는 기능구현에 매우 용이할 것으로 보인다!