[240205] 리액트 라이프사이클, useEffect

리액트 라이프 사이클이란?

리액트 컴포넌트의 탄생, 변화, 죽음

 

---

클래스형 컴포넌트의 라이프 사이클

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

 

1. Mount

컴포넌트가 화면에 추가될 때

• Render phase
  1. constructor()
  2. getDerivedStateFromProps()
  3. render
• Commit phase
  1. 리액트가 DOM 업데이트
  2. componentDidMount()

 

2. Update

컴포넌트가 새로운 prop, 상태를 받을 때

• Render phase
  1. New props, setState(), forceUpdate()
  2. shouldComponentUpdate() 에서 true 반환하는 경우 + forceUpdate()
  3. render
• Pre-Commit Phase
  • getSnapShotBeforeUpdate()
• Commit phase
  1. 리액트가 DOM 업데이트
  2. componentDidUpdate()

 

3. UnMount

컴포넌트가 화면에서 제거될 때

• Commit phase
  • componentWillUnmount()

 

---

useEffect

함수형 컴포넌트에서는 useEffect hook이 기존의 라이프사이클을 대체한다.

하지만 클래스형 컴포넌트의 라이프 사이클과는 나누어 생각해야 한다.

Instead, always focus on a single start/stop cycle at a time. It shouldn’t matter whether a component is mounting, updating, or unmounting. All you need to do is to describe how to start synchronization and how to stop it. If you do it well, your Effect will be resilient to being started and stopped as many times as it’s needed.

 

1. 동기화 시작

• useEffect의 몸체에 어떤 동기화를 할지 적는다.

useEffect(() => {
    console.log("컴포넌트 나타날 때마다 동기화");
});

useEffect(() => {
    console.log("컴포넌트 처음 나타났을 때만 동기화");
}, []);

useEffect(() => {
    console.log("id가 변경될 때마다 동기화");
    const connection = createConnection(id);
    connection.connect();
}, [id]);

 

2. 재동기화

• useEffect의 두번째 인자로 언제 재동기화할지 알린다.
• 이러한 인자는 prop 또는 state

 

3. 동기화 중지

• 동기화 중지를 위한 cleanup 함수 호출
• useEffect의 두번째 인자로 언제 cleanup을 실행할지 알린다.

useEffect(() => {
    return () => {
      console.log("컴포넌트 제거 직전에 찍혀요");
    };
});

useEffect(() => {
    return () => {
      console.log("id 업데이트 직전에 찍혀요");
      connection.disconnect();
    };
}, [id]);

 

---

참고자료

Lifecycle of Reactive Effects – React