[React]라이프사이클(Life Cycle; 생명주기)

컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리할 수도 있고, 불필요한 업데이트를 방지하기 위해 라이프사이클을 사용

함수형 컴포넌트에서 사용X -> Hooks 기능 사용해서 작업 처리

라이프사이클은 아래와 같이 나뉜다.

• 마운트
• 업데이트
• 언마운트

💡 Tip

접두사에 따라 어느시점에서 실행하는 메소드인지 유추 가능

Will - 작업을 작동하기 전에 실행
Did - 작업을 작동한 후에 실행

마운트

마운트(mount) : DOM이 생성되고 웹 브라우저상에 나타나는 것이다.

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
• getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드
• render : UI를 렌더링하는 메서드
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

컴포넌트는 4가지 경우에 업데이트를 한다.

1. props가 변경될 때
2. state가 변경될 때
3. 부모 컴포넌트가 리렌더링될 때
4. thos.forceUpdate로 강제 렌더링을 트리거할 때

• getDerivedStateFromProps : 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고싶을 때 사용한다.
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 결정하는 메소드이다. true or false를 반환해야 하며, true 반환 시 다음 라이프사이클 메소드를 계속 실행하고, false를 반환하면 작업을 중지한다. 즉 컴포넌트가 리렌더링되지 않는다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 생략하고 바로 render 함수를 호출한다.
• render : 컴포넌트를 리렌더링한다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

언마운트

언마운트(unmount) : 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것이다.

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.

컴포넌트의 라이프사이클 메서드 흐름

참고: 리액트를 다루는 기술