> Hello World !!!

     

@syaku

React component lifecycle : 리액트 컴포넌트 생명주기

React component lifecycle

리액트를 개발하기 전에 꼭 이해하고 있어야 할 것이 생명주기다.

그리고 생명주기 중에서 componentDidUpdate 는 다른 생명주기와 다르게 호출되니 잘 이해하는 것이 중요하다.

컴포넌트 한개만 사용할때는 별 차이를 느끼지 못하지만 여러 자식 컴포넌트가 존재한다면 이야기는 달라진다.

우선 리액트 컴포넌트의 기본적인 생명주기는 아래와 같다.

웹페이지가 로딩되면 Root 라는 컴포넌트는 아래와 같이 호출된다.

  • Root constructor : 클래스 생성자 딱 한번 호출된다.
  • Root componentWillMount : 딱 한번 호출된다.
  • Root render
  • Root comopnentDidMount : 딱 한번 호출된다.

Root 의 state 즉 상태가 변경되면 아래와 같이 호출된다.

  • Root shouldComponentUpdate(nextProps, nextState)
  • Root componentWillUpdate(nextProps, nextState)
  • Root render
  • Root componentDidMount(prevProps, prevState)

위 생명주기에서 state 를 변경하는 행위는 조심해야 한다. 무한반복에 빠지지 않게 작업을 해야한다. 왠만하면 상태를 변경하지 않는 것이 좋다.

shouldComponentUpdate 는 render 메서드 호출을 결정하는 생명주기이다. 기본적으로 true 이므로 항상 render 를 호출하게 된다. 만약 false 를 반환하면 그 다음 생명주기는 호출되지 않는 다. 그리고 변경된 상태(state)는 반영된 후 shouldComponentUpdate 호출되기 때문에 상태는 변경되어 있다.

여기까지 예제 소스이다. http://jsbin.com/pedaziv/edit?html,js,console,output

만약 Child 라는 컴포넌트가 있다면 아래와 같이 호출된다.

"Root constructor"
"Root componentWillMount"
"Root render"
"Child constructor"
"Child componentWillMount"
"Child render"
"Child componentDidMount"
"Root componentDidMount"

그럼 Child 의 shouldComponentUpdate 반환을 false 로 하고 Child 상태를 변경하면 아래와 같다.

"Root shouldComponentUpdate"
"Child shouldComponentUpdate"

만약 Root 의 shouldComponentUpdate 반환이 false 였다면 Root 의 shouldComponentUpdate 만 호출된다.

componentWillReceiveProps(nextProps) 생명주기를 설명하지 않았는 데 이 생명주기는 props 즉 부모의 상태값이 변경되어 자식에게 전파되었을때 호출되는 생명주기이다. 즉 다른 생명주기와 다르게 항상 호출되는 것은 아니다. 그리고 상태를 변경 (setState) 해도 추가적으로 render 를 호출하지 않는 다.

Root 컴포넌트의 상태를 변경하고 Child 에 전판된 경우의 생명주기이다.

"Root shouldComponentUpdate"
"Root componentWillUpdate"
"Root render"
"Child componentWillReceiveProps" // <--- 이부분에 호출된다. Root render 후에 호출되는 것을 알 수 있다.
"Child shouldComponentUpdate"
"Child componentWillUpdate"
"Child render"
"Child componentDidUpdate"
"Root componentDidUpdate"

그리고 마지막으로 중요한 생명주기는 componentDidUpdate 이다. 이 생명주기는 컴포넌트가 여러개인 경우 능력을 제대로 사용할 수 있다.

Child 컴포넌트가 두개인 경우 상태가 변경되면 아래와 같다.

"Root shouldComponentUpdate"
"Root componentWillUpdate"
"Root render"
"Child componentWillReceiveProps : two"
"Child shouldComponentUpdate : two"
"Child componentWillUpdate : two"
"Child render : two"
"Child componentWillReceiveProps : one"
"Child shouldComponentUpdate : one"
"Child componentWillUpdate : one"
"Child render : one"
"Child componentDidUpdate : two"
"Child componentDidUpdate : one"
"Root componentDidUpdate"

자세히 보면 componentDidUpdate 만 생명주기가 순차적으로 호출되지 않고 마지막에 한번에 호출되는 것을 확인할 수 있다.

여기까지 소스예제이다. http://jsbin.com/sowaluy/edit?html,js,console,output

생명주기를 잘 이해하고 활용한다면 정확한 데이터를 출력하는 컴포넌트를 어렵지않게 개발할 수 있다.

그리고 추가로 한가지 더...

Root 와 Child 에 같은 onClick 이 있는 경우 아래와 같이 해결해야 한다.

<div onClick={...}> // <--- Root
    <div onClick={...}> // <---- Child
    </div>
</div>

Child 를 누르든 Root 를 누르든 둘다 호출되게 된다. 이때는 Child 에서 아래와 같이 코딩한다.

onClick(e) {
    e.stopPropagation();
    ... ... 
}

그럼 Root onClick 호출되지 않는 다.

'Front-end > React' 카테고리의 다른 글

JS Dragula autoScroll with React  (0) 2018.02.20
React Dynamic Import : 동적 임포트  (0) 2017.11.24
React Validator : 폼 유효성 검증기  (0) 2017.11.12
React Datetime Picker  (0) 2017.11.12