[React] (리액트 공부하기 14) useEffect

useEffect는 React에서 함수형 컴포넌트에 사이드 이펙트(부가 작업)을 처리하기 위해 사용하는 훅이다.
React 애플리케이션에서 흔히 쓰이는 개념이다.

---

1. useEffect란?

목적:

React 컴포넌트가 렌더링될 때와 상태(state)나 props가 변경될 때 특정 작업(부가 작업)을 수행하기 위해 사용한다.

사이트 이펙트 예시:

• 서버로부터 데이터 가져오기 (API 호출)
• 브라우저 제목 변경하기
• 구독 설정 및 해제하기 (예: WebSocket, 이벤트 리스너).

---

2. 사용법

기본 구조

useEffect( () => {
  // 실행할 작업
  return () => {
    // cleanup 작업 (선택 사항)
  };
}, [의존성 배열]);

• 첫 번째 인자: 함수
  • 여기서 정의한 작업이 컴포넌트가 렌더링될 때 실행 된다.
  • 선택적으로 return 키워드를 사용해 cleanup 작업을 정의할 수 있다.
    
    
• 두 번째 인자: 의존성 배열(Dependency Array)
  • 이 배열에 명시된 값이 변경될 때만 useEffect가 실행 된다.
  • 배열이 비어 있다면([]), 컴포넌트가 처음 렌더링될 때만 실행 된다.

---

3. 예제

(1) 브라우저 제목 변경하기

import React, { useState, useEffect } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 브라우저 제목 변경
        document.title = `${count}번 클릭했습니다.`;
    }, [count]); // count가 변경될 때마다 실행

    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
}

export default Counter;

동작 설명:

1. 컴포넌트가 처음 렌더링될 때 useEffect 내부 코드가 실행되어 브라우저 제목을 설정한다.
2. count 상태가 변경될 때마다 useEffect가 다시 실행되어 브라우저 제목이 업데이트 된다.
3. [count] 배열이 없으면 상태가 변경되어도 useEffect가 실행되지 않는다.

(2) 구독 설정 및 해제

import React, { useState, useEffect } from "react";

function UserStatus({ userId }) {
    const [isOnline, setIsOnline] = useState(null);

    useEffect(() => {
        function handleStatusChange(status) {
            setIsOnline(status.isOnline);
        }

        // 구독 설정
        ServerAPI.subscribeUserStatus(userId, handleStatusChange);

        // cleanup (구독 해제)
        return () => {
            ServerAPI.unsubscribeUserStatus(userId, handleStatusChange);
        };
    }, [userId]); // userId가 변경될 때마다 실행

    if (isOnline === null) {
        return <div>대기중...</div>;
    } 
    return <dib>{isOnline ? "온라인" : "오프라인"}</dib>;
}

export default UserStatus;

동작 설명:

1. 컴포넌트가 처음 렌더링될 때 useEffect가 실행되고, ServerAPI.subscribeUserStatus를 통해 사용자 상태를 구독한다.
2. 구독이 설정되면 상태가 변경될 때마다 handleStatusChange가 호출되어 isOnline 상태가 업데이트 된다.
3. 컴포넌트가 언마운트되면 return에서 정의한 cleanup 함수가 호출되어 구독이 해제된다.

---

4. 의존성 배열의 역할

빈 배열([]):

• useEffect는 컴포넌트가 처음 렌더링될 때만 실행된다.

특정 값 포함([count]):

• 배열에 포함된 값이 변경될 때만 useEffect가 실행된다.

배열 생략:

• 모든 렌더링 후에 useEffect가 실행된다. (비효율적이므로 권장하지 않음)

---

5. 정리

• useEffect는 컴포넌트의 라이프사이클 동안 실행할 작업을 선언적으로 정의할 수 있다.
• cleanup 함수는 메모리 누수를 방지하기 위해 구독 해제, 이벤트 핸들러 제거 등 필요한 작업을 수행한다.
• React의 state, props, 또는 외부 데이터와 관련된 작업에서 반드시 활용 된다.

---

6. 추가 설명 (언마운트, cleanup 함수)

이 두 개념은 React 컴포넌트의 생명주기(lifecycle)와 관련이 있다.

1. 언마운트란?

정의:
React 컴포넌트가 더 이상 화면에 표시되지 않을 때, 즉 DOM에서 제거될 때를 "언마운트(unmount)"라고 한다.

언제 발생하나요?

• 사용자가 페이지를 이동하면서 해당 컴포넌트가 사라질 때
• 조건부 렌더링에서 특정 조건이 false가 되어 컴포넌트가 렌더링되지 않을 때
• 부모 컴포넌트가 언마운트되면서 자식 컴포넌트도 함께 사라질 때

---

2. cleanup 함수란?

정의:
useEffect에서 반환(return)하는 함수로, 컴포넌트가 언마운트될 때나 의존성 값이 변경될 때 호출 된다.

목적:

• 메모리 누수 방지: 구독, 이벤트 리스너 등을 제거하여 리소스를 정리한다.
• 정리 작업 수행: 외부와의 연결(예: 서버 구독)이나 타이머 등을 중단한다.