클래스형 컴포넌트에서 제공되었던 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기를 관리하던 API를 함수형 컴포넌트에서 사용할 수 있도록 생겨난 API가 바로 useEffect 다.
useEffect() 사용법
useEffect(function, deps)
함수의 기본 형태는 다음과 같고 function은 우리가 잘 알고 있는, 실행하고자 하는 함수를 의미하고 deps 는 배열의 형태로 입력하며 검사하고자 하는 특정 값이나 빈 배열을 입력한다.
1. componentDidMount 처럼 사용하고 싶을 때
componentDidMount는 화면에 처음 나타날때만, 즉 첫 마운트에만 실행되도록 하는 것이고 useEffect를 이용하면 deps에 빈 배열을 넣어주면 된다.
// 첫 렌더링 시에만 실행
useEffect(()=> {
// 실행하고자 하는 함수
someFunction();
}, []);
만약 렌더링 될때마다 실행되도록 하고 싶다면 아래와 같이 배열을 아예 생략해주면 된다.
// 렌더링 될때마다 실행
useEffect(()=> {
// 실행하고자 하는 함수
someFunction();
});
2. componentDidUpdate 처럼 사용하고 싶을 때
componentDidUpdate는 특정 값이 바뀔 때 마다 실행되도록 하는 것이며 useEffect를 이용하면 deps 배열안에 변화를 감지하고 싶은 특정 값을 넣어주면 된다.
하지만 이 방식은 특정 값이 바뀔 때 마다 실행되기도 하지만 첫 렌더링 시에도 실행된다.
// name이 바뀔 때 마다 실행
useEffect(()=> {
// 실행하고자 하는 함수
someFunction();
},[name]);
3. componentWillUnmount 처럼 사용하고 싶을 때
componentWillUnmount는 컴포넌트가 사라졌을 때 실행되도록 하는 것이며 useEffect에선 컴포넌트가 사라질 때, 특정 값이 바뀌기 직전에 실행되도록 할 수 있다.
cleanup : return 뒤에 따라서 나오는 함수를 의미하고 useEffect에선 뒷정리 함수라 불린다.
만약 컴포넌트가 사라질 때에만 cleanup 함수를 사용하고 싶다면 deps를 빈 배열로 넣어주면 된다.
// 컴포넌트가 사라질 때에만 claenup 함수 실행
useEffect(()=> {
someFunction();
return () => {
// 이 부분이 cleanup
console.log('This is cleanup');
};
},[]);
특정값이 업데이트 되기 직전에 cleanup 함수를 사용하고 싶다면 componenetDidUpdate때 처럼 deps 안에 감지하고 싶은 값을 넣어주면 된다.
// name이 업데이트 될 때 claenup 함수 실행
useEffect(()=> {
someFunction();
return () => {
// 이 부분이 cleanup
console.log('This is cleanup');
};
},[name]);
⚠ useEffect 내에서 사용하는 State나 Props가 존재한다면, useEffect의 deps에 넣어주는 것이 규칙이다. 만약 넣어주지 않는 다면 useEffect 내의 함수가 실행될 때 최신 State, Props를 가리키지 않는다는 문제점이 생긴다! ⚠
