Life Cycle Method - 라이프사이클메서드
라이프사이클메서드는 ?
컴포넌트를 처음으로 렌더링 할 때(또는 컴포넌트를 업데이트 하기 전 후) 특정 작업을 처리하는 경우, 불필요한 업데이트를 방지 해야 하는 경우, 클래형 컴포넌트에서만 사용 가능 합니다.
[ 라이프 사이클 메서드의 종류 ] : 총 9가지가 있습니다.
Will 접두사가 붙은 메소드 : 특정 작업을 작동하기 전에 실행되는 메소드
Did 접두사가 붙은 메소드 : 특정 작업을 작동한 후 실행되는 메소드
1) 마운트 (Mount) : DOM이 생성 되고 웹 브라우저 상에 나타나는 것 마운트 할 때는 다음의 메소드들이 차례대로 호출 됩니다.
1. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드
2. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메소드
3. render : UI를 렌더링하는 메소드
4. componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메소드
2) 업데이트 (Update) : 컴포넌트는 다음의 경우에 업데이트를 합니다.
props가 바뀔 때
state가 바뀔 때
부모 컴포넌트가 리렌더링 될 때
this.forceUpdate로 강제로 렌더링을 트리거할 때
1, 2, 3이 발생하면 다음과 같은 순서로 메서드가 호출된다. (props 변경, state 변경, 부모 컴포넌트 리렌더링)
5. getDerivedStateFromProps : 마운트에서도 호출되는 메서드. props의 변화에 따라 state에도 변화를 주고 싶을 때 사용한다.
6. shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정한다. true, false 값을 반환해야 하며, false를 반환하면 작업을 중지하고, 컴포넌트가 리렌더링 되지 않는다.
3. render: 컴포넌트를 리렌더링한다. this.forceUpdate 함수를 호출하면 앞의 과정을 생략하고 바로 render 함수를 호출한다.
7. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출한다.
8. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출한다.
3) 언마운트 (UnMount) : 컴포넌트를 DOM에서 제거 할 때
9. componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메소드 위 메소드들은 클래스형 컴포넌트 일 때의 라이프 사이클 과정이고, 함수형 컴포넌트 일 때 라이프 사이클 과정에서는 React Hooks의 useEffect()를 사용한다.