최근 면접을 보고 왔다. 기술면접이 아니라서 별다른 준비를 하고 가진 않았다.
하지만 면접에서 나는 " 리액트를 최근 공부하고 있으며, 이쪽으로 갈 거다! " 말했더니...
* 면접관 : (오호...요놈 봐라) 아? 그래요? 그러면 useEffect에 대해서 설명해 보세요.
* 나 : 네?!
긴장했던 탓인지 어버버 거리며 대충 설명을 하였더니... 혼이 아닌 혼이 났다...😥
그런 의미에서 useEffect에 대한 공부를 다시 해보겠다.
예를 많이 들어서, 언제라도 쉽고, 빠르게, 빡대가리라도 이해할 수 있게 말이다...
1. useEffect 란?
- 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
조금 더 쉽게 말하면 리액트에서 컴포넌트가 UI렌더링 될 때마다 특정 작업을 할 수 있도록 도와주는 기능이다.
예를 들어, 어떤 웹사이트를 열면 무언가를 로딩하는 작업을 생각해 보자.
가령, 넷플릭스에서 영화 목록을 보여주는 페이지를 열 때, 처음에는 영화 목록을 불러오는 시간이 걸릴 수가 있다.
이때 ' useEffect '를 사용하면 컴포넌트가 렌더링 될 때마다 이 작업을 자동으로 수행하게 할 수 있다.
예를 들어서, 영화 목록을 불러오는 작업을 한다고 가정해 보자.
import React, { useState, useEffect } from 'react';
function MovieList() {
const [movies, setMovies] = useState([]);
useEffect(() => {
// 여기에 영화 목록을 불러오는 코드를 작성합니다.
fetch('https://api.example.com/movies')
.then(response => response.json())
.then(data => setMovies(data))
.catch(error => console.error(error));
}, []); // 빈 배열을 넣어줘서 컴포넌트가 처음 렌더링 될 때만 실행됩니다.
return (
<div>
<h2>Movie List</h2>
<ul>
{movies.map(movie => (
<li key={movie.id}>{movie.title}</li>
))}
</ul>
</div>
);
}위 코드에서 ' useEffect ' 는 컴포넌트가 처음 렌더링 될 때에만 영화 목록을 불러오는 작업을 실행한다.
그리고 영화 목록을 가져온 후에는 더 이상 이 작업을 수행하지 않는다.
2. 사용방법
* 선언방법
첫 번째 인자는 함수(Effect Function), 두 번째 인자는 배열(Dependency Array)이 들어간다.
1) 함수(Effect Function) 이 부분에는 "컴퓨터야, 이 작업을 해줘!"라고 말해주는 함수를 넣는다.
이 함수 안에는 원하는 작업들을 설정함. 예를 들어, 네이버에서 검색 결과를 가져오는 작업을 함수를 만들어서 여기에 넣어줄 수 있다.
2) 배열(Dependency Array) 이 부분에는 컴퓨터에게 "언제 이 작업을 다시 해줘야 해!"라고 알려주는 것을 넣을 수 있다.
예를 들어, 네이버 검색 결과를 가져오는데 어떤 정보가 바뀔 때마다 다시 작업해야 한다면, 그 정보를 이 배열에 넣어주면 된다.
*중학생도 이해하기 쉬운 예제를 통해 알아보자🤔
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
// 이 작업은 count 값이 바뀔 때마다 실행돼요.
console.log('count 값이 바뀌었습니다!', count);
}, [count]); // count 값을 의존성 배열에 넣어줘야 컴퓨터가 알아들어요.
const increaseCount = () => {
setCount(count + 1);
};
return (
<div>
<h1>클릭 횟수: {count}</h1>
<button onClick={increaseCount}>클릭해보세요!</button>
</div>
);
}
export default App;이 예제에서는 버튼을 클릭할 때마다 `count`값이 바뀌는데, 그때마다 `useEffect`안에 있는 작업이 실행된다.
그런데 `count`값을 의존성 배열에 넣어주어야만 컴퓨터가 "count 값이 바뀌었으니까 작업을 다시 해줘!"라고 알아듣는다.
요약하자면 `useEffect`에는 무엇을 할지 알려주는 함수와 언제 작업을 다시 해줘야 하는지 알려주는 의존성 배열이 들어간다. 이렇게 넣어주면 컴퓨터가 더 효율적으로 작업을 할 수 있다.
(진짜 이렇게 말했으면 좋았겠다...이제라도 알았으니, 제대로 알고, 말하고, 사용해야 겠다...🫡)