📜 useEffect 공식문서 간단 정리

💿 useEffect란?

useEffect는 리액트 함수형 컴포넌트에서 외부 시스템과 동기화할 수 있는 Hook이다. 예를 들어, 네트워크 연결, 타이머 설정, 브라우저 이벤트 등록 등 리액트 외부의 작업을 처리할 때 사용한다.

 

 

📌 기본 문법 

useEffect(() => {
  // 실행할 코드 (설정)
  return () => {
    // 정리(clean-up)할 코드
  };
}, [의존성]);

 

• 첫 번째 인자: 설정 함수 (컴포넌트가 마운트되면 실행된다.)
• 두 번째 인자: 의존성 배열 (값이 변경될 때만 재실행된다.)

 

 

📌 실행 시점

 

• 컴포넌트 마운트 시 실행
• 의존성 배열 값이 바뀔 때 언마운트 → 재실행
• 컴포넌트 언마운트 시 정리 함수 실행
• 개발 모드에서는 디버깅을 위해 한 번 더 실행됨 (Strict Mode)

 

📌예제 간단 요약

 

 

1. 외부 시스템 연결

useEffect(() => {
  const connection = createConnection(url, roomId);
  connection.connect();
  return () => connection.disconnect(); // 정리
}, [url, roomId]);

컴포넌트가 화면에 표시될 때 연결하고, 사라질 때 연결을 해제한다.

 

2. 사용자 정의 훅에서 사용

공통적인 useEffect 로직은 커스텀 훅으로 추출 가능하다.

function useChatRoom({ url, roomId }) {
  useEffect(() => {
    const connection = createConnection(url, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [url, roomId]);
}

 

 

3. 데이터 가져오기 (fetch)

useEffect(() => {
  let ignore = false;
  setBio(null);
  fetchBio(person).then(result => {
    if (!ignore) setBio(result);
  });
  return () => { ignore = true; };
}, [person]);

네트워크 요청 중 컴포넌트가 사라질 수 있으므로 ignore로 보호한다.

 

4. 타이머 등 이전 상태 기반 업데이트

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

• setCount(prev => prev + 1) 형태를 사용하면 의존성 필요 없다.

 

---

 

• 의존성 배열 정확하게 기재 필요하고,
• 렌더링 중 생성된 객체/함수를 의존성으로 넣으면 재실행 반복된다. 
• 조건문, 루프 내부에서 useEffect 사용하면 안 된다.
• 서버 사이드 렌더링에선 작동 안 한다.
• 의존성 배열이 없는 경우 → 매 리렌더링 할때마다 실행한다.
• 무한 루프: useEffect 내 상태 업데이트가 다시 useEffect를 트리거를 하는 상황.
• Strict Mode에서 실행 두 번 되는 것처럼 보일 수 있다. → 정상 동작한다.

 

 

📌 마무리 정리

외부 시스템 사용	네트워크, 타이머, 브라우저 API 등과 동기화
초기 데이터 가져오기	서버에서 데이터 불러오기
상태 업데이트 감지	특정 state/props가 바뀔 때 동작 실행
컴포넌트 생명주기 대체	mount/unmount 타이밍 활용