- Clean Up Effect: setInterval과 그것을 초기화하는 ClearInterval까지 이해한 상태 (20230909)
// 순수 함수: Side Effect가 없는 상태입니다.
const sumNums = (x, y) => {
return x + y;
}
// sumNums 함수가 num 변수를 참조하고 있기 때문에 Side Effect가 있습니다.
const num = 1;
const sumNums = (x) => {
return x * num;
}
// sumNums 함수가 num 변수의 값을 주고 있기 때문에 Side Effect가 있습니다.
let num;
const sumNums = (x) => {
num = x + 1;
}
// 이 셋의 예시 외에도 console.log(), DOM 조작 등도 Side Effect가 발생한다고 합니다.
import { useEffect } from 'react';
const Login = () =>{
// 첫 번째 인자로 들어간 함수는 모든 렌더링이 완료된 후 호출됩니다. 이 같은 경우에는 매 렌더링마다 함수가 호출됩니다.
useEffect(함수)
return (
...
)
}
import { useEffect } from 'react';
const Login = () =>{
// 두 번째 인자로 들어간 의존성 배열은 Side Effect 발생 여부를 결정짓는 조건입니다.
useEffect(함수, [의존성 배열])
// 이 예시에서의 콘솔은 첫 렌더링이 끝난 후에 출력됩니다. 그리고 이후에는 color 값이 했을 때 출력됩니다. 이렇게 변경된 값을 의존성 배열에 담는 것을 '구독'한다고 합니다.
useEffect(() => {
console.log("색상이 바뀌었네요!")
}, [color])
return (
...
)
}
1) 컴포넌트 렌더링(mount)
2) useEffect hook의 첫 번째 인자인 함수 호출(Side Effect)
3) 컴포넌트의 state 또는 props 변경 시 리렌더링 발생(update)
4) useEffect hook의 두 번째 인자인 의존성 배열 확인
1) 구독한 값이 변경되었다면 첫 번째 인자인 함수 호출(Side Effect)
5) 컴포넌트가 불필요한 경우에 화면에서 지움(unmount)