[리액트] useEffect

React에서 useEffect 함수는 컴포넌트가 렌더링 될 때마다 실행되는 함수입니다.

useEffect 함수는 컴포넌트의 상태나 속성 값 등이 변경될 때마다 호출됩니다.

useEffect 함수는 이전 렌더링에서의 상태 값을 가져올 수 있으므로, 이전 값과 현재 값을 비교하여 변경이 있을 경우에만 추가적인 작업을 수행할 수 있습니다.

 

useEffect 함수는 함수 컴포넌트 내에서 사용되며, 두 개의 매개 변수를 받습니다.

첫 번째 매개 변수는 함수 컴포넌트가 렌더링될 때 실행할 함수이며, 두 번째 매개 변수는 의존성 배열입니다.

의존성 배열은 useEffect 함수가 의존하는 값의 배열로, 해당 값이 변경될 때마다 useEffect 함수를 실행합니다. 빈 배열을 전달하면 컴포넌트가 처음 렌더링 될 때만 useEffect 함수가 실행됩니다.

useEffect 함수는 컴포넌트가 마운트(컴포넌트가 DOM에 삽입될 때), 언마운트(컴포넌트가 DOM에서 제거될 때), 업데이트(컴포넌트가 업데이트될 때)할 때마다 실행될 수 있습니다. 이를 컨트롤하기 위해서는 useEffect 함수의 두 번째 매개 변수를 적절하게 설정해야 합니다.

---

 

예제1

React에서 useEffect() 함수는 컴포넌트가 마운트될 때, 언마운트될 때, 그리고 업데이트될 때 특정한 작업을 수행할 수 있도록 해줍니다. 이 함수는 컴포넌트가 렌더링될 때마다 호출됩니다.

예를 들어, 다음 코드는 컴포넌트가 렌더링될 때마다 현재 시간을 출력합니다.

 

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

function Clock() {
const [time, setTime] = useState(new Date().toLocaleTimeString());

useEffect(() => {
const interval = setInterval(() => { 
setTime(new Date().toLocaleTimeString());
}, 1000); 

// cleanup function

return () => clearInterval(interval);
}, []); 
return ( 
<div> 
<h1>{time}</h1> 
</div> 
); 
}

export default Clock;

useEffect() 함수에 첫 번째 인자로 전달되는 함수는 componentDidMount와 componentDidUpdate에서 수행하는 작업을 수행합니다. useEffect() 함수가 반환하는 함수는 componentWillUnmount에서 수행하는 작업을 수행합니다.

두 번째 인자로 전달되는 배열은 의존성 배열(dependency array)이라고 하며, 이 배열에 포함된 값이 변경될 때만 useEffect() 함수가 호출됩니다. 두 번째 인자를 생략하면 모든 렌더링이 완료될 때마다 useEffect() 함수가 호출됩니다.

 

 

 

---

 

예제2

 

다른 예제로는 useEffect() 함수를 사용하여 API를 호출하는 경우가 있습니다.

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

function PostList() { 
const [posts, setPosts] = useState([]); 

useEffect(() => { 
const fetchData = async () => { 
const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); 
setPosts(response.data);
}; 
fetchData(); 
}, []); 

return (
<div> 
<h1>Posts</h1> 
<ul> 
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))} 
</ul> 
</div> 
);
}

export default PostList;

위 코드에서는 useEffect() 함수를 사용하여 axios를 이용해 외부 API에서 데이터를 가져옵니다. 두 번째 인자로 빈 배열([])을 전달하므로써, 컴포넌트가 처음 마운트될 때만 fetchData 함수가 호출됩니다. 이후에는 useEffect() 함수는 다시 호출되지 않습니다.

이와 같은 방식으로 useEffect() 함수를 사용하여 컴포넌트에서 필요한 작업을 수행할 수 있습니다.