component life cycle

1. 컴포넌트라이프사이클
임광규
2020.ReactJS 1

2. 라이프사이클메서드의이해
모든리액트컴포넌트에는라이프사이클(수명주기)이존재합니다.컴포넌트의수명은페이지에
랜더링되기전인준비과정에서시작하여페이지에서사리질때끝납니다.
참고로라이프사이클메소드는클래스형컴포넌트에서만사용할수있습니다.
함수형컴포넌트에서는사용할수없는데요.그대신에 Hooks 기능을사용하여비슷한작업을처리
할수있습니다.
2020.ReactJS 2

3. 라이프사이클메소드
라이프사이클메소드의종류는총9개입니다. Will 접두사가붙은메소드는어떤작업의 시
작전 에실행되는메소드이고, Did 접두사가붙은메소드는어떤 작업 후 에실행되는메소드
입니다.
라이프사이클은총세가지,즉 마운트 , 업데이트 , 언마운트 카테고리로나뉩니다.
2020.ReactJS 3

4. 마운트
constructor :컴포넌트를새로만들때마다호출되는클래스생성자메소드
getDerivedStateFromProps :props에있는값을state에넣을때사용하는메소드
render :우리가준비한UI를랜더링하는메소드
componentDidMount :컴포넌트가웹브라우저상에나타난후호출되는메소드
2020.ReactJS 4

5. 마운트시동작순서도
2020.ReactJS 5

6. 업데이트발생조건
컴포넌트는다음의경우에업데이트합니다.
.props가바뀔때
.state가바뀔때
.부모컴포넌트가리랜더링될때
.this.forceUpdate로강제로랜더링을트리거할때
2020.ReactJS 6

7. 업데이트
getDerivedStateFromProps :마운트시에도호출,업데이트시작전호출
shouldComponentUpdate :컴포넌트가리렌더링을해야할지결정할때사용
이메소드는true,false를반환
true 를반환할경우다음라이프사이클메소드를실행하고, false일 경우작업을중지
render :컴포넌트를리랜더링
getSnapshotBeforeUpdate :컴포넌트변화를DOM에반영하기바로직전에호출하는메
소드
componentDidUpdate :컴포넌트업데이트작업이끝난후호출하는메소드
2020.ReactJS 7

8. 업데이트시동작순서도
2020.ReactJS 8

9. 언마운트
마운트의반대과정,즉컴포넌트를DOM에서제거하는것을언마운트(unmount)라고합니다.
componentWillUnmount :컴포넌트가웹브라우저상에서사라지기전에호출하는메소드
2020.ReactJS 9

10. 언마운트시동작순서도
2020.ReactJS 10

11. render()
컴포넌트의모양새를정의라이프사이클메소드중유일한필수메소드
이메소드안에서는this.props와this.state에접근할수있으며,리액트요소를반환
아무것도보여주고싶지않다면null값이나false값을반환
주의사항
이벤트설정이아닌곳에서setState를사용하면안되며,브라우저의DOM에접근해서도안됩니다.
DOM정보를가져오거나state에변화를줄때는componentDidMount에서처리해야합니다.
2020.ReactJS 11

12. constructor
컴포넌트생성자로컴포넌트를만들때처음실행됩니다.
이메소드에서는초기state를정할수있습니다.
2020.ReactJS 12

13. getDerivedStateFromProps
리액트v16.3이후에새로만든라이프사이클매소드로
props로받아온값을state에동기화시키는용도로사용되며,컴포넌트가마운트될때와업데
이트될때호출됩니다.
2020.ReactJS 13

14. componentDidMount
컴포넌트를만들고첫랜더링을다마친후실행
다른자바스크립트라이브러리또는프레임워크의함수를호출하거나,이벤트등록,
setTimeout,setInterval,네트워크요청같은비동작작업을처리합니다.
2020.ReactJS 14

15. shouldComponentUpdate
props또는state를변경했을때,리랜더링을시작할지여부를지정하는메소드입니다.
이메소드에서는반드시true,false를반환해야합니다.
컴포넌트생성시이메소드를생성하지않으면기본적으로언제나true를반환합니다.
만약false값을반환하면업데이트과정은여기서중지됩니다.
2020.ReactJS 15

16. getSnapshotBeforeUpdate
리액트v16.3이후생긴메소드로render에서만들어진결과물이브라우저에실제로반영되기
직전에호출됩니다.
이메소드에서반환하는값은componentDidUpdate에서세번째파라미터인snapshot값으
로전달받을수있습니다.
주로업데이트하기직전값을참고할일이있을때활용됩니다.(ex:스크롤바위치유지등)
getSnapshotBeforeUpdate(prevProps, preState){
if(prevState.array != this.state.array){
const {scrollTop, scrollHeight} = this.list;
return {scrollTop, scrollHeight};
}
}
2020.ReactJS 16

17. componentDidUpdate
리랜더링을완료한후실행합니다.
업데이트가끝난직후이므로,DOM관련처리를해도무방합니다.
prevProps또는prevState를사용하여컴포넌트가이전에가졌던데이터에접근이가능합니
다.
getSnapshotBeforeUpdate에서반환한값이있다면여기서snapshot값을전달받을수있습
니다.
2020.ReactJS 17

18. componentWillUnmount
컴포넌트를DOM에서제거할때실행합니다.componentDidMount에서등록한이벤트,타이
머,직접생성한DOM이있다면여기서제거잡업을합니다.
2020.ReactJS 18

19. componentDidCatch
리액트v16에서새롭게도입되었으며,컴포넌트랜더링도중에에러가발생했을때애플리케이
션이먹통이되지않고오류UI를보여줄수있게해줍니다.
componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({error, info})
}
2020.ReactJS 19

20. 참고자료:라이프사이클표시
2020.ReactJS 20