[React] useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈

화면에 첫 렌더링(Mount), 다시 렌더링(Update), 화면에서 사라질 때(Unmount) 특정 작업 코드를 처리해주고 싶다면 useEffect 를 사용하면 된다.

useEffect(() => {} )

useEffect는 인자로 콜백함수를 받는다. 다른 함수의 인자로 전달된 함수를 의미한다.

이 콜백함수 내부에 원하는 로직을 작성하면 된다.

#1

useEffect(() => {
	// 작업...
});

렌더링 될때 마다 실행

#2

useEffect(() => {
	// 작업...
}. []);

화면에 첫 렌더링 될때 실행, value 값이 바뀔 때 실행한다.

Clean Up

useEffect(() => {
	// 작업...
}. []);

함수를 리턴해주면 해당 컴포넌트가 언마운트 될 때, 혹은 다음 렌더링 시 불릴 useEffect 가 실행되기 이전에 함수가 실행된다.

https://www.youtube.com/watch?v=kyodvzc5GHU