내일배움캠프 React_7기 TIL - 23. 반응형 Effects의 생명주기

반응형 Effects의 생명주기

1. effects? useEffect?

• effects란, 컴포넌트가 렌더링 될 때마다 실행되는 특정 작업(Side effect)을 말한다.
  • 예를 들어, 데이터 fetching, DOM 수정, 그리고 외부 API와의 통신 같은 작업들이 여기에 포함
• useEffect란, React에서 effect를 설정하고 관리하는 훅으로, 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업(effect)을 수행할 수 있도록 함.

2. 컴포넌트의 생명주기 vs Effects의 생명주기

컴포넌트의 생명 주기

• Mount : 처음 화면에 나타날 때 실행
• Update : 컴포넌트가 상태나 props가 변경되어 다시 렌더링될 때 실행
• Cleanup : 컴포넌트가 화면에서 사라지기 직전(Unmount) 이나, 다음 effect가 실행되기 전에 이전 effect를 정리할 때 호출

Effects 의 생명주기는 이렇게 생각해선 안됨.

---

Effects의 생명 주기

• effect는 동기화를 시작(Effect 실행)하고 나중에 동기화를 중지(CleanUp 실행)하는 두 가지 작업만 할 수 있다.

동기화 : useEffect 훅에서 주로 외부 리소스나 상태 변화에 맞춰 업데이트하는 작업

useEffect(() => {
  // 동기화 시작: 데이터 fetching, 타이머 설정 등
  console.log("Effect 실행");

  return () => {
    // 동기화 중지: 타이머 해제, 이벤트 리스너 제거 등
    console.log("Cleanup 실행");
  };
}, [dependency]);  // 의존성 배열

3. 동기화가 여러번 일어나야 하는 이유?

• 컴포넌트의 props나 상태가 바뀔 때마다, 이전에 진행된 동기화(예: 이전 채팅방 연결)를 끊고, 새로운 값으로 다시 동기화를 시작해야 하기 때문이다.

  동기화의 흐름 (예시는 공식문서 기준)

  • 첫 번째로, useEffect 내부에서 현재 연결을 종료하는 cleanup 함수가 실행 (예: "general" 방에서의 연결 종료).
  • 두 번째로, 새로운 roomId에 맞춰 새로운 연결이 이루어짐 (예: "travel" 방으로 연결).

💡 React는 이렇게 기존의 동기화를 끊고 새 동기화를 진행하는 과정을, useEffects와 cleanup 함수를 통해 자동으로 처리해주는것이다.

4. Effects 재동기

• effect가 다시 동기화되는 주된 이유는 effect가 사용하는 일부 데이터가 변경된 경우이다.

• React가 Effect를 다시 동기화해야한다는 것을 인식하는 방법

  • roomId가 변경된 후 effect를 다시 동기화해줄 수 있는 이유는, 종속성 목록 , , [ ])에 roomId를 포함함으로써 React에 이 effect가 roomId에 "의존"한다고 알렸기 때문이다.
  • (예시는 공식문서 기준)

5. 반응형 값에 “반응”하는 effect

• 변경되지 않는 값을 useEffect 의 종속성으로 지정하는 것은 의미가 없다.
• 전역 또는 변경할 수 있는 값에는 반응하지 않는다.

  • React에서 반응형 값과 변경할 수 있는 값은 약간 다르다.

  • 반응형 값은 React의 상태나 props처럼 React의 렌더링 사이클 내에서 관리되고 업데이트되며, 변경할 수 있는 값은 React의 렌더링 사이클 밖에서 값을 변경할 수 있는 데이터이다.

  • 즉, 렌더링 흐름(사이클)과 관련이 없는 값들은 변경시에 React가 감지(추)할 수 없기에 컴포넌트를 리렌더링 하지 않는다.

    컴포넌트 본문에서 선언된 모든 변수는 반응형?

  • 컴포넌트 본문에서 선언된 변수가 반응형이라는 뜻은, 그 변수들이 렌더링 사이클과 관련이 있기 때문이다.

  • 하지만… 아래의 코드와 같은 일반적인 변수(myVariable)는 반응형 아님.

    function MyComponent() {
      const myVariable = 10;  // 일반적인 변수
      return <div>{myVariable}</div>;
    }

  • Props와 state, 그리고 이들로부터 계산하는 값을 반응형이라고 함.