[공부하면서 쓰는] useEffect의 개념과 사용법

1.개요 

 

이번 글에서는 useEffect란 무엇인지, 어떻게 사용하는지 단계별로 알아보겠습니다. useEffect는 주로 사이드 이펙트(예: API 호출, DOM 업데이트) 처리를 위해 사용되는 React 훅입니다. 이전 글에서는 useState를 다루었지만, useEffect는 상태 변경 후의 작업을 다루는 훅으로, 리액트 컴포넌트에서 중요한 역할을 담당합니다.

 

 

✅React를 사용하다 보면 컴포넌트의 상태나 UI가 업데이트될 때마다 어떤 작업을 실행하거나 정리해야되는 상황이 자주 발생하는데 이 작업을 사이드 이펙트라고 부르며 이를 효과적으로 처리하기 위해 useEffect란 훅이 사용됩니다. 

 

* 사이트 이펙트(side Effect)란? 

사이드 이펙트는 함수나 메서드의 실행이 프로그램의 상태나 다른 부분에 영향을 미치는 것을 의미한다. 

 

2. useEffect란? 

 

useEffect는 컴포넌트가 렌더링 된 후 실행되는 함수이며 주로 비동기 작업(API 호출) 또는 DOM 업데이트와 같은
사이드 이펙트 처리할때 유용합니다. 

 

 

3. useEffect의 기본 사용법 

- useEffect의 기본 형태 

useEffect(()=> {
  console.log("컴포넌트가 렌더링되었습니다")
});

 

위 코드에서 useEffect는 컴포넌트가 렌더링 될때마다 실행됩니다. 이를 제어하려면 의존성 배열을 추가해야 합니다. 

 

✅ 여기서 잠깐! 의존성 배열이란? 

 

의존성 배열(dependency array)은 useEffect의 두번째 인자로 전달되는 배열로써, useEffect가 어떤 상태나 props가 변경

될 때만 실행되어야 하는지를 지정해줍니다. 

 

useEffect의 의존성 배열이 있을때의 기본 구조 예제 

 

useEffect(() => {
  //실행할 작업
},[])

 

의존성 배열에 따른 동작 차이 

 

- 의존성 배열이 없는 경우

useEffect(() => {
  console.log("컴포넌트가 렌더링될 때마다 실행됩니다.");
});

 

해당 경우에 useEffect는 컴포넌트가 처음 렌더링될 때와 상태,props가 변경될 때마다 실행되는데 즉, 리랜더링이 

발생할 때마다 계속해서 실행되게 됩니다. 

 

- 빈 배열을 사용하게 될 경우 ([ ])

useEffect(() => {
  console.log("처음 마운트 될 때만 실행됩니다.");
},[]);

 

* 의존성 배열이 빈 배열일 경우 useEffect는 컴포넌트가 처음 마운트(즉 화면에 나타날 때) 될때만 실행되고 이후 다시 

실행되지 않습니다 

* 이 방법은 초기 데이터 로드나 마운트 시에만 필요한 설정 작업을 처리할 때 사용합니다. 

 

- 특정 상태나 props가 변할 때만 실행되는 경우 

 

useEffect(() => {
  console.log("count가 변경될 때만 실행됩니다.");
}, [count]);

 

의존성 배열에 count라는 상태 변수를 넣으면 count가 변경될 때마다  useEffect가 실행하게 됩니다. 특정 상태가 변경

되었을 때만 부수 작업을 실행하고 싶을 때 유용하게 사용됩니다. 

 

의존성 배열의 예제와 동작 비교 

 

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

function Counter() {
  const[count,setCount] = useState(0);
  const[name,setName] = useState("");
  
  // 1.의존성 배열이 없는 경우 : 매번 실행
  useEffect(() => {
   console.log("useEffect 실행")
  });
  
 // 2. 빈 배열: 마운트시 한번만 실행 
 useEffect(() => {
 	console.log("useEffect 실행")
 },[])
 
 // 3. count가 변할 때만 실행
 useEffect (() => {
   console.log(`count가 ${count}로 변경`) 
 },[count])
 
 return (
  <div>
    <h1>{name}</h1>
     <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <button onClick={() => setName(name === "React" ? "ReactJS" : "React")}>
        Change Name
      </button>
  </div>
 )
}

export default Counter;

 

 

의존성 배열을 사용하는 이유 ?

 

의존성 배열을 사용하지 않으면 모든 상태나 props가 변경될 때마다 useEffect가 실행되어 불필요한 부수 효과가 

발생할 수 있습니다. 따라서 의존성 배열을 설정하여 특정 상태가 변경될 때만 useEffect가 실행되도록 제어하면 성능

최적화와 코드의 가독성을 높일 수 있습니다. 

 

 

4. 글을 마치며 

 

이 글에선 useEffect의 개념과 사용법에 대해 알아보았는데 저도 쓰면서 배워야할 점이 많다고 생각했던 것 같습니다.

리액트를 잘 이해했다고 생각했지만 아직 더 공부해야 할게 많다고 느껴집니다.