useEffect

useEffect란?

useEffect는 컴포넌트가 렌더링된 이후 특정 작업을 실행하기 위한 React Hook이다. API 호출, 이벤트 등록, 타이머 설정, 브라우저 제목 변경, 외부 라이브러리 연동처럼 화면을 그리는 것 외에 추가적으로 수행해야 하는 작업을 처리할 때 사용한다.

React 컴포넌트는 상태(State)가 변경될 때마다 다시 렌더링된다. 버튼을 클릭할 때마다 컴포넌트가 다시 실행되며 렌더링이 출력되는데, 렌더링이 끝난 후 특정 작업을 실행하고 싶을 때 바로 useEffect를 사용한다.

---

기본 구조

useEffect(() => {
  // 실행할 코드

  return () => {
    // 정리(Cleanup) 코드
  };
}, [dependencies]);

---

실행 순서

1. 컴포넌트 함수 실행
2. JSX 반환
3. 화면(DOM) 렌더링
4. 브라우저에 화면 표시
5. useEffect 실행

즉, useEffect는 화면이 먼저 그려진 뒤 실행된다.

예를 들어 페이지에 접속했을 때 데이터를 불러오는 코드를 useEffect 안에 작성하면,
사용자는 먼저 화면을 볼 수 있고 그 이후에 API 요청이 실행된다.

React는 화면 렌더링을 우선 처리한 뒤 부수 효과(Side Effect)를 실행하기 때문에
렌더링 과정에 영향을 주지 않고 안전하게 외부 작업을 수행할 수 있다.

---

 

의존성 배열(Dependency Array)

1. 지정하지 않을 시 : 매 렌더링마다 실행

useEffect(() => {
  console.log("실행");
});

의존성 배열을 작성하지 않으면 렌더링될 때마다 실행된다.

 

2. [] : 최초 한 번만 실행

useEffect(() => {
  console.log("최초 실행");
}, []);

빈 배열을 전달하면 컴포넌트가 처음 마운트될 때만 실행된다.

대표적으로 API 호출 시 자주 사용한다.

useEffect(() => {
  fetchUsers();
}, []);

 

3. [특정 값] : 특정 값이 변경될 때 실행

useEffect(() => {
  console.log("count 변경");
}, [count]);

count 값이 변경될 때마다 실행된다.

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

  useEffect(() => {
    console.log(`현재 값: ${count}`);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      증가
    </button>
  );
}

---

Cleanup 함수

useEffect는 컴포넌트가 사라지기 전에 정리 작업도 할 수 있다.

useEffect 안에는 return으로 반환하는 함수가 클린업 함수이다. 

useEffect(() => {
  const timer = setInterval(() => {
    console.log("실행 중");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

return 안에 작성한 함수는 다음 상황에서 실행된다.

• 컴포넌트가 언마운트될 때
• Effect가 다시 실행되기 직전

---

useEffect 사용 원칙

1. 화면 렌더링만으로 해결되면 useEffect를 쓰지 않는다

2. 외부 시스템과 동기화할 때 사용한다

useEffect의 본래 목적이다.

예시

• API 호출
• 이벤트 등록
• WebSocket 연결
• localStorage 저장
• 타이머 생성
• 외부 라이브러리 연동

3. 의존성 배열을 정확히 작성한다

4. 정리(Cleanup)가 필요한 작업은 반드시 정리한다

5. 무한 루프를 조심한다

6. 사용자 이벤트는 useEffect에서 처리하지 않는다