React.js - 라이프사이클 메서드(Lifecycle Method)

 

 

 

 

React를 공부하면서 가장 마음에 든 것중에 하나가 라이프사이클 메서드가 있다는 것이다.

 

라이프사이클은 간단히 말해서 어플리케이션이 실행 될 때의 '순간 순간'이라고 생각하면 쉽게 이해할 수 있을 것 같다.

 

보통 로딩이나 로딩 후 제어라든지, 또는 값을 불러오기 전과 후의 처리를 명확하게 해줄 수 있는 메서드가 있다는건 아주 명확하고 큰 장점이라고 생각한다.

 

예전에 공부했던 Android도 라이프사이클 메서드가 있어서 굉장히 편리했던 생각이 든다. 아마 요즘 최신 프론트엔드 개발 방식에서도 라이프사이클 메서드가 있다고는 생각한다.(잘 모르겠지만...ㅎㅎ)

 

 

라이프사이클 메서드의 종류.

 

1. getDerivedStateFromProps - 컴포넌트를 마운트 하거나 props를 변경할 때 호출

 

2. componentDidMount - 컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행. 보통 비동기 작업을 처리할 때 사용

 

3. shouldComponentUpdate - props 나 state를 변경 했을 때 리렌더링을 시작할지 여부를 지정. 리턴값은 반드시 true나 false로 설정해줘야함.

 

4. getSnapshotBeforeUpdate - render 메서드를 호출 후 DOM에 변화를 반영하기 바로 직전에 호출하는 메서드

 

5. componentDidUpdate - 렌더링을 완료한 후 실행. prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에도 접근 가능.

 

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

 

 

 

라이프사이클 메서드의 순서.

 

getDerivedStateFromProps -> shouldComponentUpdate(true/false)

true -> (render) -> componentDidMount or getSnapshotBeforeUpdate -> componentDidUpdate

false -> x

componentWillUnmount