React에서 side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 hook
useEffect(콜백 함수, 의존성 배열)
- 콜백함수 : 특정한 side effect를 수행
- 의존성 배열 : 렌더링 시 useEffect를 실행할 조건
import { useEffect } from 'react'
// 사용법
useEffect(콜백 함수, 의존성 배열);
// 1번
useEffect(() => {
// side effect
});
// 2번
useEffect(() => {
// side effect
}, [value]);
// 3번
useEffect(() => {
// side effect
}, [value1, value2]);
- 의존성 배열이 전달되지 않았으므로 매 렌더링마다 side effect가 실행된다
- 첫 번째 렌더링 이후에 side effect를 실행하고 그 이후에는 value 값이 변했을 때만 실행한다.
- 첫 번째 렌더링 이후에 side effect를 실행하고 그 이후에는 value1, value2 중 하나라도 변하면 side effect를 실행한다.
- 컴포넌트가 최초로 렌더링 ->
mount
- useEffect의 콜백함수 실행
- 컴포넌트의 state, props가 업데이트 되었을 경우 리렌더링 발생 ->
updated
- useEffect의 의존성 배열 확인
- 의존성배열 값이 없는 경우 : 최초 렌더링 시에만 호출하므로 콜백함수가 실행되지 않는다.
- 의존성배열 값이 변경된 경우 : 콜백함수를 호출한다.
- 의존성배열 값이 변경되지 않은 경우 : 콜백함수 호출하지 않는다.
- 컴포넌트 간 이동하거나 필요없으면 화면에서 사라짐 ->
unmount
컴포넌트가 unmount 시에도 해당 콜백함수가 계속 실행되고 있다면 효율성이 떨어지기 때문에 clean up을 통해 종료시켜줘야한다.
useEffect(() => {
// 콜백함수 실행
// ...
// clean up을 하는 함수를 return
return;
})
clean up을 호출하는 경우
- 다음 side effect를 발생시키기 전
- 컴포넌트가 unmount 되었을 때
import { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom";
const App = () => {
const [count, setCount] = useState(0);
const navigate = useNavigate();
useEffect(() => {
console.log("test1"); // 1
return () => {
console.log("test2"); // 2
};
}, [count]);
console.log("test3"); // 3
return (
<>
<button onClick={()=>{setCount(count + 1)}}>숫자 증가</button>
<button onClick={()=>{navigate('/main')}}>메인 페이지 이동</button>
</>
);
};
export default App;
- 컴포넌트 최초 mount시
'test3' 'test1'
가 차례로 출력- '숫자 증가'버튼 클릭 시 setCount()에 의해 의존성 배열에 값인 count state가 변화했으므로 콜백 함수가 실행,
'test3' 'test1'
가 차례로 출력- '메인 페이지 이동'버튼 클릭 시 unmount되어 컴포넌트가 사라졌으므로 clean up을 호출하여
'test2'
가 출력