오늘은 React에서 자주 사용하는 useEffect에 대해서 알아보자.
useEffect란 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
useEffect는 component가 mount(처음 나타날 때), unmount(사라질 때), update(업데이트 될 때) 특정 작업을 처리할 수 있다.
즉 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.
기본형태
useEffect(function, deps)
-function : 수행하고자 하는 작업
-deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열
- Component가 mount 됐을 때 (처음 나타났을 때)
useEffect(() => {
console.log("마운트 될 때만 실행");
}, []);- 컴포넌트가 화면에 가장 처음 렌더링 될 때
한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.
useEffect(() => {
console.log('렌더링 될 때 마다 실행');
});- 만약 배열을 생략하면 리렌더링 될 때 마다 실행된다.
- Component가 update 될 때 (특정 props, state가 바뀔 때)
useEffect(() => {
console.log(name);
console.log('업데이트 될 때 마다 실행');
}, [name]);
// const [name, setName] = useState();
name의 상태가 변할 때 마다 실행-
특정 값이 업데이트 될 때 실행하고 싶을 경우에는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.
(의존값이 들어있는 배열 deps 라고도 하며, dependency를 의미한다.) -
업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.
- Component가 unmount 됐을 때 (사라질 때 & update 되기 직전에)
useEffect(() => {
console.log('effect');
console.log(name);
return () => {
console.log('cleanup');
console.log(name);
};
}, []);-
cleanup 함수 반환 (return 뒤에 나오는 함수이며, useEffect에 대한 뒷정리 함수라고 한다.)
-
unmount 될 때만 cleanup 함수를 실행하고 싶을 때
: 두 번째 파라미터로 빈 배열을 넣는다. -
특정 값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때
: deps 배열 안에 검사하고 싶은 값을 넣어준다.
deps에 특정 값 넣기
deps에 특정 값을 넣게 된다면 컴포넌트가 처음 mount(생성)될 때, 지정한 값이 update(변경)될 때, unmount(삭제)될 때, 값이 바뀌기 직전에 모두 호출이 된다.
useEffect 안에서 사용하는 상태나 props가 있다면, useEffect의 deps에 넣어주어야 하는 것이 규칙이다.
만약 사용하는 값을 넣어주지 않는다면, useEffect 안의 함수가 실행될 때 최신 상태 props를 가리키지 않는다.
deps 파라미터를 생략한다면, Component가 리렌더링 될 때 마다 useEffect 함수가 호출된다.
