[React] 라이프사이클(Lifecycle)

컴포넌트 라이프사이클(Component LIfecycle)

리액트 컴포넌트는 그려지는 순간부터 사라지기까지 여러 지점에서 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해 줍니다. 

 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

---

마운트(mount)

• constructor : 생성자 메서드로 컴포넌트 생성 시 가장 먼저 실행됩니다. 
• getDerivedStateFroProps : 새 props를 받았을 때 호출되며 받아온 것을 state에 넣고 싶을 때 사용합니다. 
• render : 컴포넌트를 렌더링 합니다.
• componentDidMount : 컴포넌트의 첫 렌더링이 끝나면 호출됩니다. 

업데이트(update)

• getDerivedStateFromProps : props나 state가 변경되어도 호출됩니다. 
• shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정합니다. 
• render : 렌더링
• getSnapshotBeforeUpdate : DOM 업데이트 직전에 호출됩니다. 
• componentDidUpdate : 리렌더링이 끝나고 화면에 모두 반영된 후에 호출됩니다. 

언마운트(unmount)

컴포넌트가 화면에서 사라지는 것을 의미합니다. 

• componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.