React.js useEffect

useEffect란 무엇인가요?

useEffect는 React 함수형 컴포넌트에서 사이드 이펙트(부수 효과)를 처리하기 위한 Hook입니다. 

사이드 이펙트란 컴포넌트의 렌더링 이외에 발생하는 모든 작업을 말해요. 예를 들면:

---

데이터 가져오기 (API 호출)

---

이벤트 리스너 등록/해제

---

DOM 직접 조작

---

타이머 설정/해제 (setTimeout, setInterval)

---

로컬 스토리지 접근

 

 

 

 

---

 

useEffect의 기본 구조

 

useEffect(() => {
  // 실행할 코드 (사이드 이펙트)
  
  return () => {
    // 정리(cleanup) 함수
  };
}, [의존성 배열]);

jsx

 

 

 

 

---

useEffect의 라이프사이클 관점

React의 클래스 컴포넌트에 익숙하셨다면, useEffect는 다음 라이프사이클 메서드들을 대체한다고 생각하시면 됩니다:

---

컴포넌트 마운트(탄생) 시: 

componentDidMount와 유사

---

컴포넌트 업데이트 시: 

componentDidUpdate와 유사

---

컴포넌트 언마운트(소멸) 시: 

componentWillUnmount와 유사

 

 

 

 

 

---

useEffect의 세 가지 사용 패턴

---

1. 마운트(탄생) 시에만 실행

컴포넌트가 처음 화면에 나타날 때만 실행하려면, 의존성 배열을 빈 배열([])로 전달합니다.

 

useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다!");
  // 데이터 가져오기, 이벤트 리스너 설정 등
}, []);

jsx

 

이 패턴은 컴포넌트가 처음 나타날 때 한 번만 실행되므로, 초기 데이터를 가져오거나 설정하는 데 유용합니다 .

---

2. 특정 값이 변경될 때마다 실행

의존성 배열에 감시할 값을 넣으면, 그 값이 변경될 때마다 useEffect가 실행됩니다.

 

useEffect(() => {
  console.log(`count가 변경되었습니다: ${count}`);
  // count가 변경될 때마다 실행할 코드
}, [count]);

jsx

 

이 패턴은 특정 상태나 props가 변경될 때 추가 작업이 필요한 경우에 유용합니다 .

---

3. 모든 렌더링마다 실행

 

의존성 배열을 생략하면, 컴포넌트가 렌더링될 때마다 useEffect가 실행됩니다.

 

useEffect(() => {
  console.log("컴포넌트가 업데이트되었습니다!");
  // 렌더링마다 실행할 코드
});

jsx

 

이 패턴은 렌더링이 발생할 때마다 항상 실행해야 하는 코드가 있을 때 사용합니다. 

하지만 성능 문제가 발생할 수 있으니 주의해야 합니다.

 

 

 

---

정리(Cleanup) 함수

useEffect 내에서 return 문으로 함수를 반환하면, 이 함수는 컴포넌트가 언마운트되거나 다음 useEffect가 실행되기 전에 호출됩니다.

 

useEffect(() => {
  // 타이머 설정
  const timer = setTimeout(() => {
    console.log('타이머 실행!');
  }, 1000);
  
  // 정리 함수
  return () => {
    clearTimeout(timer); // 타이머 해제
    console.log('타이머가 정리되었습니다!');
  };
}, []);

jsx

 

이 정리 함수는 메모리 누수를 방지하는 데 중요합니다. 

예를 들어, 이벤트 리스너나 타이머를 설정했다면, 컴포넌트가 사라질 때 반드시 해제해야 합니다 .

 

 

---

비동기 작업 처리

useEffect 내에서 비동기 작업을 할 때는 주의가 필요합니다. 

직접 useEffect 함수를 async로 만들지 말고, 내부에 별도의 async 함수를 만들어 호출하는 것이 좋습니다.

 

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

jsx

 

 

이렇게 하면 비동기 작업이 완료되기 전에 컴포넌트가 언마운트되거나 다른 비동기 작업이 시작되는 상황을 더 잘 관리할 수 있습니다 .

 

---

결론

 

useEffect를 이해하고 적절히 사용하면, 함수형 컴포넌트에서도 클래스 컴포넌트처럼 다양한 라이프사이클 관련 작업을 수행할 수 있습니다. 

 

 

 

 

 

 

end