7. 컴포넌트의 라이프사이클 메서드

라이프 사이클 메서드의 이해

• 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다.
• 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기 가 존재한다.
• 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
• 라이프 사이클 : 페이지에 렌더링되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지
• 이럴 때..
  • 처음으로 렌더링할때 어떤 작업을 처리해야할 때
  • 업데이트 하기 전, 후에 어떤 작업을 처리해야 할 때
  • 불필요한 업데이트를 방지할 때

3가지 카테고리와 그 메서드

👀 마운트(mount)

DOM이 생성되고 웹 브라우저상에 나타나는 것

컴포넌트가 생성 될때 발생하는 생명주기들을 알아봅시다.

☑️ constructor

• 컴포넌트 새로 만들 때 마다
• 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드this.props, this.state에 접근이 가능하고 리액트 요소를 반환합니다.

☑️ getDerivedStateFromProps

• props값을 state에 넣을 때
• props로부터 파생된 state를 가져옵니다. 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용합니다.

☑️ render

• 준비한 UI 렌더링 할 때
• 컴포넌트를 렌더링하는 메서드입니다.

☑️ componentDidMount

• 컴포넌트가 웹 브라우저에 나타난 후에
• 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드 입니다.이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태입니다.여기서는 주로 DOM을 사용해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로하는 데이터를 ajax로 요청, 등의 행위를 합니다.

useEffect(()=>{
	console.log("componentDidMount");
},[])

👀 업데이트(updating)

• 업데이트는 다음과 같은 4가지 경우에 업데이트 됩니다.
  • props가 바뀔 때 : 부모에서 props가 변해서 자식 컴포넌트에 넘겨줄 때
  • state가 바뀔 때 : 컴포넌트 자신이 가지고 있는 state가 setState에 의해 바뀔 때
  • 부모 컴포넌트가 리렌더링될 때 : 말 그대로..
  • this.forceUpdate가 강제로 렌더링을 트리거 할 때

컴포넌트가 업데이트되는 시점에 어떤 생명주기 메서드들이 호출되는지 알아봅니다.

☑️ getDerivedStateFromProps

컴포넌트의 props나 state가 바뀌었을때도 이 메서드가 호출됩니다.

☑️ shouldComponentUpdate

컴포넌트가 리렌더링 할지 말지를 결정하는 메서드입니다.

• React.memo와 유사함, boolean 반환으로 결정

☑️ render

• 이는 가장 기초적인 메서드이기도하고 가장 중요한 메서드이기도 하다.
• 컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이기도 하다. 함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링할 수 있다.

☑️ componentDidUpdate

컴포넌트가 업데이트 되고 난 후 발생합니다.

• 의존성 배열이 변할때만 useEffect가 실행하는 것과 같음

useEffect(() => {
	console.log("count or exampleProp changed");
},[count, exampleProp]);

👀 언마운트(unmount)

언마운트라는 것은 컴포넌트가 화면에서 사라지는 것을 의미합니다. 언마운트에 관련된 생명주기 메서드는 componentWillUnmount 하나입니다.

☑️ componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출됩니다.여기서 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout을 걸은 것이 있다면 clearTimeout을 통하여 제거를 합니다.추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose기능이 있다면 여기서 호출해주시면 됩니다.

useEffect(()=>{
	console.log("");
    return(() => exampleAPI.unsubscribe());
})

라이프사이클 9 메서드 살펴보기

1. render

• 컴포넌트 모양새 정의

2. constructor

• 생성자 메서드. 초기 state 설정

3. getDerivedStateFromProps

• props에서 받아 온 값 state에서 동기화
• nextProps, prevState 인자 2개 사용. 안에 조건문을 통해 동기화 할지 결정

4. componentDidMount

• 첫 렌더링을 다 마친 후. 다른 JS파일, 라이브러리, 프레임워크의 함수 호출 등 비동기 작업 수행

5. shouldComponentUpdate

• props나 state 변경 되었을 때 리렌더링을 할지 안할지 결정
• 현재 props, state => this.props, this.state
• 새로 설정될 props, state => nextProps, nextState
• 업데이트 성능을 개선할 때

6. getSnapshotBeforeUpdate

• render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출
• 이 메서드의 반환값은 componentDidUpdate 메서드의 세번째 인자인 snapshot 전달 ( 스크롤바 위치같은 것 참고할 때)

7. componentDidUpdate

• 리렌더링을 완료한 후
• prevPorps, prevState를 이용해 리렌더링 이전의 snapshot 값 전달 받음

8. componentWillUnmount

• 컴포넌트에서 DOM을 제거할 때 실행.
• componentDidMount에서 등록한 이벤트, 직접 생성한 DOM 등등.. 여기서 제거

9. componentDidCatch

• 에러 발생시 오류 UI 출력