17. useEffect 훅 (Hook)

📌 React.js 17차시: useEffect 훅 (Hook)

 

🎯 학습 목표

✅ useEffect 훅의 개념과 필요성을 이해 ✅ useEffect의 기본 사용법을 익히고 다양한 상황에서 적용하는 방법 학습 ✅ 의존성 배열을 이용하여 효과적인 상태 관리 수행 ✅ 클린업 함수의 개념과 활용법을 익혀 메모리 누수를 방지하는 방법 학습 ✅ 실제 프로젝트에서 useEffect를 활용하여 비동기 작업 및 이벤트 리스너 관리 적용

---

📝 1. useEffect란?

✅ useEffect의 개념

• useEffect는 함수형 컴포넌트에서 Side Effect(부수 효과)를 수행하기 위한 React Hook입니다.
• 클래스 컴포넌트의 생명주기 메서드 (componentDidMount, componentDidUpdate, componentWillUnmount)를 대체하는 역할을 합니다.
• 렌더링 이후 실행되며, API 호출, DOM 조작, 이벤트 리스너 등록 및 정리 등의 작업을 수행할 수 있습니다.

📌 사용 예제:

import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("컴포넌트가 렌더링됨");
  });
  return <h1>Hello, useEffect!</h1>;
}

📌 강사님 TIP:

• useEffect는 렌더링 직후 실행되므로, 초기 로딩 시 데이터를 불러오는 작업에 적합합니다.
• useEffect는 비동기 작업이나 외부 시스템과의 연동이 필요할 때 반드시 사용해야 합니다.

---

📝 2. useEffect 기본 사용법

✅ useEffect의 기본 구조

useEffect(() => {
  // 실행할 코드
}, [의존성 배열]);

의존성 배열 실행 시점

없음	매 렌더링마다 실행 (렌더링 최적화 필요)
[]	마운트될 때 한 번만 실행 (componentDidMount 대체)
[state]	특정 state가 변경될 때 실행 (componentDidUpdate 대체)

📌 예제: 의존성 배열 없이 사용 (비추천)

useEffect(() => {
  console.log("렌더링될 때마다 실행됨");
});

⚠️ 문제점: 모든 렌더링에서 실행되므로 성능 저하가 발생할 수 있음.

📌 예제: 의존성 배열을 활용하여 특정 값이 변경될 때 실행

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

📌 예제: 빈 배열을 사용하여 마운트될 때 한 번만 실행

useEffect(() => {
  console.log("컴포넌트가 처음 마운트됨");
}, []);

📌 강사님 TIP:

• API 호출 시 useEffect(() => {...}, [])를 사용하면, 한 번만 실행되어 불필요한 호출을 방지할 수 있습니다.
• state 값이 변경될 때마다 동작해야 하는 경우 해당 state를 의존성 배열에 추가하세요.

---

📝 3. 클린업 함수 (Cleanup Function)

✅ 클린업 함수란?

• useEffect 내부에서 이전 effect를 정리하는 함수입니다.
• 컴포넌트가 언마운트되거나, 의존성 배열의 값이 변경되기 직전에 실행됩니다.
• 이벤트 리스너 정리, 타이머 해제 등을 수행하여 메모리 누수를 방지할 수 있습니다.

📌 예제: 타이머 정리 (메모리 누수 방지)

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

  return () => {
    clearInterval(timer);
    console.log("타이머가 정리됨");
  };
}, []);

📌 예제: 이벤트 리스너 정리

useEffect(() => {
  const handleResize = () => {
    console.log("창 크기 변경됨");
  };

  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

📌 강사님 TIP:

• return을 사용하여 클린업 함수를 정의하면 불필요한 메모리 사용을 방지할 수 있습니다.
• 이벤트 리스너를 정리하지 않으면 메모리 누수가 발생할 수 있으므로 주의하세요.

---

📝 4. useEffect 활용 예제

✅ 1) 데이터 페칭 (API 호출)

useEffect(() => {
  async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, []);

✅ 2) 사용자 입력 감지 및 동적 UI 변경

useEffect(() => {
  document.title = `입력값: ${inputValue}`;
}, [inputValue]);

✅ 3) 다크 모드 설정 유지

useEffect(() => {
  document.body.className = isDarkMode ? "dark-mode" : "light-mode";
}, [isDarkMode]);

---

🔥 회고

💡 이번 강의를 통해 배운 점

• useEffect의 기본 동작을 확실히 이해할 수 있었다.
• 의존성 배열을 활용하여 필요할 때만 effect를 실행하는 방법을 익혔다.
• 클린업 함수가 메모리 관리에 중요한 역할을 한다는 점을 배웠다.

🛠️ 어려웠던 점과 해결 방법

• useEffect의 실행 타이밍을 정확히 이해하는 것이 처음에는 어려웠다.
• 해결 방법: React 공식 문서를 참고하고, 다양한 패턴을 실습하며 익힘

🎯 앞으로의 학습 방향

• useEffect를 React.memo, useCallback과 함께 사용하여 성능 최적화 실험
• API 요청을 useEffect로 최적화하는 방법 연구
•  

---

 

🔖 본 후기는 [한글과컴퓨터 x 한국생산성본부 x 스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.