UseEffect 란?
- React Hooks 의 기능 중 하나이다.
- 컴포넌트가 렌더링된 후 부수적인 작업(side effect) 을 수행할 수 있도록 도와준다.
- 함수 컴포넌트 내에서만 사용할 수 있다.
부수 효과란? (side effect)
- 데이터 가져오기 (fetch)
- 이벤트 리스너 추가 / 제거하기
- 타이머 설정하기
UseEffect 기본 문법
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 실행할 코드
return () => {
// 정리(clean-up) 코드 -> 사용하는 useEffect 를 언마운트 시 제거하여 메모리 정리
};
}, [// 의존성 배열 : 이 배열에 포함된 값이 변경될 때만 useEffect 실행]);
useEffect 의 의존성 배열
- 의존성 배열이 없는 경우
useEffect(() => {
console.log('항상 실행됩니다.');
} //비어있음 );
컴포넌트가 매번 렌더링될 때마다 실행된다.
- 빈 배열인 경우
useEffect(() => {
console.log('처음 한 번만 실행됩니다.');
}, [// 비어있는 배열 ]);
컴포넌트가 마운트될 때 ( 화면 로딩 시 한번만 ) 실행된다.
- 특정 값이 있는 경우
useEffect(() => {
console.log(`count 값이 ${count}로 변경되었습니다.`);
}, [count]);
count 값이 변경될 때만 실행된다.
정리(clean-up) 작업
- useEffect 내부에서 반환하는 함수는 컴포넌트가 언마운트 되거나 다음 useEffect가 실행되기 전에 호출된다.
- clean-up 작업은 메모리 누수를 방지하고, 이벤트 들을 올바르게 제어할 수 있도록 도와줌.
useEffect(() => {
const handleResize = () => {
console.log('창 크기가 변경되었습니다.');
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
// 언마운트 되거나 의존성 변경 시 이벤트 제거
};
}, [] // 빈 배열이므로 마운트 시에만 실행);
자주 사용하는 useEffect 기능
- 데이터 가져오기 (API 호출)
-
import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 서버 데이터를 가져오는데에 'axios' 를 활용
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => { // then : 서버로부터 데이터를 성공적으로 가져왔을 때 실행
setData(response.data);
// response.data에는 서버에서 반환한 데이터가 담긴다.
// 가져온 데이터를 setData로 state에 저장
})
.catch(error => { // catch : 데이터를 가져오는 도중 에러가 발생했을 때 실행
console.error(error);
// 에러 내용을 콘솔에 출력합니다.
});
}, [] // 해당 컴포넌트가 마운트 되었을때만 실행.);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
useEffect를 이용해서 컴포넌트가 처음 렌더링될 때 데이터를 가져오는 작업을 수행할 수 있다.
- axios ?
Node.js 환경에서 작동하는 'HTTP 클라이언트 라이브러리' 이다.
위 예제에서는 axios.get 메서드를 통해 외부 API 에서 데이터를 가져오는 역할을 수행하고있다
- 타이머 설정하기
-
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000); // 매 1000 밀리세컨드 마다 seconds 값 1씩 증가.
return () => clearInterval(interval);
// 컴포넌트 언마운트 시 타이머 interval 정리
}, [] // 컴포넌트가 마운트되면 useEffect 실행);
return <div>{seconds}초가 지났습니다.</div>;
// seconds 가 초단위로 증가
}
useEffect 사용시 주의사항
- 의존성 배열 관리 (의존성 배열 올바르게 설정하기)
- 무한 루프 방지