개요
useEffect( () => {} )
// 렌더링 될때마다 실행.
or
useEffect( () => {}, [value] )
// 화면에 첫 렌더링이 될때 실행, value값이 바뀔때 실행
or
useEffect( () => {
// ...기존 함수
retrun ( () => {
// 화면에서 기존 함수가 끝나면 실행.
} )
}, [value] )useEffect훅은 컴포넌트를 외부 시스템과 동기화 할 수 있는 React훅이다.
어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라질 때)처럼(즉, 렌더링 될 때마다) 특정 작업을 처리하는 실행 시키고 싶을 때 사용한다.
기본적으로 콜백함수를 받으며 두가지 형태를 띄고 있다.
useEffect( ( ) => { } )의 형태는 렌더링 될때마다 실행을 하고자 하는 콜백함수를 사용한다. (비효율적이기 때문에 거의 사용되지 않음.)
useEffect( ( ) => { }, [value] )의 형태는 [ ]안에 값이 없다면 화면에 첫 렌더링이 될때, [ ]안에 값이 value가 있다면 value값이 변경이 될때 실행된다.
이때, [ ]는 Dependency Array(의존성 배열)라 부른다.
Dependency Array(의존성 배열)
Dependency Array(의존성 배열)는 useEffect, useCallback, useMemo 등의 Hook에서 사용되는 배열로, Hook이 불필요하게 반복해서 실행되는 것을 방지하여 성능텍스트을 최적화하기 위해서 사용한다.
의존성 배열의 주요 목적은 다음과 같다.
- Hook의 재실행 조건 설정 : 의존성 배열에 포함된 값들이 변경될 때만 훅이 재실행되도록 조건을 설정한다. 이를 통해 불필요한 실행을 방지할 수 있다.
- 최신 상태 유지 : 의존성 배열을 사용하면 Hook이 항상 최신 상태의 값을 참조할 수 있다. 이를 통해 불필요한 연산을 방지할 수 있다.
- 의존성 관리의 명확성 : 의존성 배열을 사용하면 훅이 어떤 값에 의존하고 있는지 명확하게 파악할 수 있다. 이는 코드의 가독성을 높이고, 의도하지 않은 의존성 관계를 방지할 수 있다.
활용예제
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count is ${count}`);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}useEffect는 컴포넌트가 렌더링될 때마다 실행된다. 따라서, useEffect를 사용할 때 불필요한 실행을 방지하려면, useEffect가 실행될 조건을 지정해주어야 한다. 이때 사용되는 것이 의존성 배열이다.
예를 들어, 다음과 같은 코드에서 useEffect는 count가 변경될 때만 실행되도록 의존성 배열을 지정하고 있다.
즉, useEffect는 의존성배열안의 값이 변경될 때마다 렌더링을 요청하는 훅이다.
Clean Up 좀 더 알아보기
useEffect(() => {
let lock = false;
if(!lock) {
const timer = setTimeout(() => {
// 3초마다 함수 실행
}, 3000);
}
return () => { lock = true }; // clean-up 함수
}, []);clean-up 함수는 컴포넌트가 마운트 해제될 때(Unmount) 실행한다. 즉, useEffect안의 함수가 멈추었을 때 실행되는 코드를 반환해준다.
적용점
useState에 이어 자주 사용되는 훅이다. 예시만 보면 화면의 첫 렌더링 시에 주로 사용되는 예제가 많은데 어떠한 값에 대하여 변화가 있을 때 렌더링을 실행하게 하는 걸로 이해하는게 더 나을 것 같다.
또 clean Up에 대해 두루뭉실하게 넘어가서 언마운트에 관한 개념이 없었는데 이번에 확실히 알게 되었다.
참조
- https://react-ko.dev/reference/react/useEffect
(FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'useEffect') - https://www.youtube.com/watch?v=kyodvzc5GHU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2
(별코딩 'React Hooks에 취한다' 시리즈)
