[React] useEffect로 의도대로 렌더링 하기

useEffect

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

(클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳤다고 봐도 무방하다.)

import { useEffect } from 'react';

useEffect(() => {
	...
});

이렇게 사용하면 렌더링 될 때마다 ... 코드가 실행된다.

 

화면에 맨 처음 렌더링될 때(마운트)만 실행하고 싶을 때

useEffect(() => {
	...
}, []);

함수의 두번째 파라미터로 빈 배열을 넣어주면 된다.

(단, 개발 환경에서만 useEffect가 두번 호출 될 수 있다.)

 

특정 값이 업데이트될 때만 실행하고 싶을 때

특정 값이 바뀔때마다 특정 작업을 수행해야 할 때 useEffect를 통해 할 수 있다.

useEffect(() => {
	...
}, [value]);

함수의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

(useState로 관리하고 있는 상태값이나 props로 전달받은 값을 넣어주면 된다.)

 

마무리

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 

두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.