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 |