리액트 life cycle

 리액트는 컴포넌트 기반의 View를 중심으로한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에서 렌더링되기 전에서 시작하여, 페이지에서 사라질 때 끝이난다.

 

 위의 사진에서 볼 수 있듯이 크게 세가지 상황이 존재할 수 있는데 생성 될때(mount), 업데이트 할 때(update), 제거할 때(unmount)이다. 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다. 업데이트 부분은 총 4가지 상황에서 발생하는데, 1. props가 바뀔 때, 2. state가 바뀔 때, 3. 부모 컴포넌트가 리렌더링 될때, 4. this.forceUpdate로 강제로 렌더링을 트리거 할 때이다.

 

라이프 사이클 메서드

 

1. constructor

- 컴포넌트의 생성자 메서드이며, 컴포넌트를 만들 때 처음으로 실행된다.

- 초기 state값을 정할 수 있다.

 

2. getDerivedStateFromProps

- props로 받아 온 값을 state에 동기화시키는 용도

- 컴포넌트가 마운트/업데이트 될 때 사용

 

3. shouldComponentUpdate

- props나 state를 변경했을 때, 리렌더링을 시작할 지 여부를 결정하는 메서드.

- 반드시 true나 false 값을 반환해야한다.(기본적으로 true를 반환. false 반환시 업데이트 중지)

- 현재 props/state는 this.props와 this.state로 접근하고, 새로 설정될 props/state는 nextProps와 nextState로 접근한다.

 

4. render

- 컴포넌트의 모양새를 정의한다.

- 라이프사이클 메서드 중 유일한 필수 메서드

- this.props와 this.state에 접근하며, 리액트 요소를 반환한다.

 

5. getSnapshotBeforeUpdate

- render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출

- 업데이트하기 직전 값을 참고할 때 사용

 

6. componentDidMount

- 컴포넌트를 만들고 첫 렌더링을 마친 후 실행

- 비동기 작업을 처리한다.

- 다른 자바스크립트 라이브러리나 프레임워크의 함수를 호출

- 이벤트 등록

- setTimeout, setInterval

- 네트워크 요청

 

7. componentDidUpdate

- 렌더링 완료 후 실행

- DOM 관련 처리가 가능하다

- prevProps/prevState를 사용해 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다.

- getSnapshotBeforeUpdate의 반환값을 snapshot 파라미터로 사용할 수 있다.

 

8.componentWillUnmount

- 컴포넌트를 DOM에서 제거할 때 실행

- componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM은 여기서 제거 작업을 해야한다.

 

9componentDidCatch

- 컴포넌트 렌더링 도중 에러가 발생했을 때 오류가 나온 곳을 보여준다.

- 컴포넌트 자신에게 발생하는 에러는 잡아낼 수 없고, 자신의 자식으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다.