리액트에서 useState()과 함께 가장 많이 사용하는 Hook은 useEffect()이다. useEffect()는 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 도움을 준다. 이러한 기능은 클래스형 컴포넌트의 생명주기 메서드(componentDidMount, componentDidUpdate, compoenntWillUnMount)와 같은 기능이다.
2. useEffect() 사용하기
기본형태 useEffect(function, deps)
function: 수행하고자 하는 작업
deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값이 들어가거나 또는 빈 배열이다.
deps에 특정 값을 넣게 된다면 컴포넌트가 처음 마운트 될 때 useEffect()가 호출되고 deps에 넣은 특정 값이 바뀔 때에도 useEffect()가 호출된다. 아래의 코드를 보면서 deps에 특정값이 있을 때와 없을 때의 useEffect()를 비교해보지.
import React, { useEffect, useState } from 'react';
const Test = () => {
const [number, setNumber] = useState(1);
const onClickChangeBtn = () => {
const num = Math.floor(Math.random() * 100);
setNumber(num);
};
// 컴포넌트가 마운트 될 때만 실행
useEffect(() => {
console.log('컴포넌트 마운트');
}, []);
// 컴포넌트가 마운트 또는 업데이트 될 때 실생
useEffect(() => {
console.log(`컴포넌트 마운트 또는 컴포넌트 업데이트 ${number}`);
}, [number]);
return (
<div>
<span>Number: {number}</span>
<button onClick={onClickChangeBtn}>숫자 바꾸기</button>
</div>
);
};
export default Test;
위의 코드에서 useEffect()가 두 번 보인다. 보이는 순서대로 1번 useEffect(), 2번 useEffect()라고 부르겠다.
1번 useEffect()의 deps은 특정 값이 없은 빈 배열이다. 그렇기 때문에 처음 컴포넌트가 생성될 때만 호출이 된다.
2번 useEffect()의 deps에는 number값이 들어가있다. number의 값은 숫자 바꾸기 버튼을 누를 때 마다 바뀌기 때문에 2번 useEffect()는 숫자 바꾸기 버튼을 눌러 number값이 바뀔 때 때 마다 호출이 된다.
아래는 숫자 바꾸기 버튼을 눌를 때 마다 호출되는 useEffect()의 결과 사진이다.
6. deps 파라미터를 생략하기
useEffect()의 deps의 자체를 생략하게 된다면 컴포넌트가 마운트 될 때 뿐만 아니라 리랜더링 될 때마다 useEffect()가 호출된다.
위의 코드에서 숫자 바꾸기 버튼을 누를 때 마다 number값이 바꾸기 때문에 컴포넌트가 계속 리랜더링 된다. 그리고 useEffect()를 보면 deps가 완전히 생략되어 있기 때문에 컴포넌트가 리랜더링 될 때 마다 useEffect()가 호출된다. 다시 말해 흐름을 정리하면 아래와 같다.
숫자 바꾸기 버튼을 누른다.
number값이 바뀐다.
컴포넌트가 리랜더링 된다.
useEffect()가 호출된다.
아래는 숫자 바꾸기 버튼를 누를 때 마다 useEffect()가 호출되어 계속 찍히는 콘솔의 사진이다.
7. Conclusion
useEffect()를 자주 사용했었다. 하지만 lifecycle과는 연관을 지어 생각을 하지 않았다. 이번 공부를 통해 lifecycle과 연관을 지어 이해하도록 노력을 했고, cleanup함수에 대해서도 막연하게 알고 있었는데 어떨 때 사용하지는 알 수 있는 공부였다.
