[React] useEffect 알아보기

💡 useEffect 

참고영상
https://www.youtube.com/watch?v=kyodvzc5GHU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2

React 에서 useEffect 는 함수 컴포넌트가 렌더링 될 때마다 부수 효과(side Effects)를 수행할 수 있게 해주는 핵심적인 React 훅(hook)이다. 여기서 Side Effects 란, 컴포넌트 외부와의 상호작용을 말하며, 주로 데이터 가져오기, 구독 설정 등을 포함한다.

 

useEffect 는 기본적으로 매 렌더링 후에 실행되지만, 의존성 배열(dependency array)을 통해 특정 상태나 props 가 변경될 때만 실행되도록 설정할 수 있다. 이는 컴포넌트 생명주기와 비슷한 역할을 한다. -> 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 된 것!

 

 

---

 

❓ useEffect 와 생명주기

1. 마운트(Mount): 컴포넌트가 화면에 첫 렌더링 됐을 때
2. 업데이트(Update): 컴포넌트가 업데이트되어 다시 렌더링 됐을 때
3. 언마운트(Unmount): 컴포넌트가 화면에서 사라질 때

useEffect( () ⇒ { // 우리가 원하는 작업 } )

 

기본적으로 useEffect 훅은 인자로 콜백함수를 받음.

 

콜백함수란?

- 다른 함수의 인자로 전달된 함수

- 콜백함수 내부에 우리가 원하는 작업을 처리해 줄 코드를 작성해 주면 됨.

 

 

---

 

❓ useEffect 형태

1. 렌더링 될 때마다 실행

- useEffect 인자로 하나의 콜백함수만 받는다.

useEffect(() => {
	// 렌더링 될 때 마다 실행
});

 

2. 맨 처음 렌더링 될 때만 실행

- useEffect 첫 번째 인자로 콜백함수, 두 번째로 인자로 빈 배열을 받는다.

useEffect(() => {
	// 처음 렌더링 될 때(마운트 될 때)만 실행
}, []);

 

3. value 값이 바뀔 때 실행

- useEffect 첫 번째 인자로 콜백함수, 두 번째 인자로 의존성 배열을 받는다.

- 화면에 처음 렌더링 될 때 + value 값이 바뀔 때 실행됨

useEffect(() => {
	// value 값 업데이트 될 때 실행
}, [value]);

 

4. unmount 될 때 실행

우리가 만약 useEffect 에서 어떤 서비스에 구독하는 코드를 넣었다면, 이후에 구독을 해제해 주는 cleanup 정리 작업을 해줘야 한다. 이런 정리 작업을 처리해 주려면 useEffect 에 return 값으로 우리가 원하는 정리하는 작업을 하는 함수를 넣어주면 된다.

이렇게 함수를 return 해주면 해당 컴포넌트가 unmount 될 때 + 다음 렌더링 때 불릴 useEffect 가 실행되기 전에 그 함수가 실행된다.

useEffect(() => {
	// 구독
	return () => {
		// 구독 해제
	}
}, [])

 

 

---

 

❓ 간단한 예제

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

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

  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행
    console.log('컴포넌트가 마운트됨');

    // cleanup 함수: 컴포넌트가 언마운트되기 전에 실행됨
    return () => {
      console.log('cleanup 작업 수행');
    };
    
  }, [count]); // count 상태가 업데이트될 때마다 실행

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

export default ExampleComponent;

코드 설명

1. useState 를 사용해서 count 상태와 상태를 업데이트할 수 있는 setCount 함수 정의
2. useEffect 훅을 사용해서 부수 효과를 정의
   • 컴포넌트가 마운트 될 때 실행되는 로그 메시지 출력
   • cleanup 함수를 정의하여 컴포넌트가 언마운트되기 전에 실행되는 로그 메시지 출력
3. useEffect 의존성 배열에 [count] 를 전달해서, count 상태가 변경될 때 실행되도록 설정

 

예제 실행 결과

count 값이 변할 때마다 로그가 잘 출력되는 것을 확인할 수 있음

 

 

---

 

⚠ 주의사항

useEffect 의 두 번째 인자인 의존성 배열에는 useEffect 내부에서 사용하는 상태(state)나 외부 변수를 명시적으로 포함해야 된다. 이 배열을 통해 useEffect 가 실행되는 조건을 명확히 할 수 있음.

 

 

---

 

✅ 요약

1. useEffect 는 리액트의 부수 효과 관리 훅이다.
2. useEffect 를 사용해서 컴포넌트의 생명주기를 관리할 수 있다. (mount, update, unmount)
3. useEffect 의 두 번째 인자인 의존성 배열을 사용해서 실행 조건을 명시적으로 설정 가능
4. cleanup 함수를 활용해서 정리 작업 수행 가능