두 손끝의 창조자

useEffect 함수 내부에서 반환하는 함수는 클린업 함수라고 한다. 클린업 함수는 컴포넌트가 언마운트 될 때 호출된다. 불필요한 자원해제 등을 위해 쓴다. 컴포넌트가 마운트 됐을 때 호출되는 함수를 정의하기 위해서는 useEffect 두 번째 파라미터에 [] 빈 배열을 넣는다. 이 빈 배열을 넣은 useEffect 함수에서 반환하는 함수가 컴포넌트 클린업 함수이다.

useEffect 훅을 이용해서 컴포넌트가 처음 로딩될 때 무언가 작업을 하려면 useEffect(() => { console.log('~~~~') }, []);이처럼 두번째 바라미터에 빈 배열을 전달해서 사용한다. 그런데 이게 두번씩 호출 될때가 있다. 상위 컴포넌트의 의해서 두번로딩될 수 도 있지만 React.StrictMode 인 경우도 두번 호출이 된다. React.StrictMode는 보통 index.js 에 컴포넌트가 추가되어 있으니 불필요하다고 판단될때는 제거해서 테스트 해보자.

모든 컴포넌트 재평가 후에 useEffect를 실행한다. 컴포넌트가 렌더링되는 주기 안에서 사용되어야 하는 코드가 있을 때 유용함. 의존성이 변경될 때 실행된다. useEffect 에서 사용하는 모든 것을 의존성으로 넣어야 한다. 안넣어도 되는 것은 상태 업데이트 함수 내장 API 또는 함수 (fetch(), localStorage) useEffect 외의 변수 import { useEffect, useState } from 'react'; let myTimer; const MyComponent = (props) => { const [timerIsActive, setTimerIsActive] = useState(false); const { timerDuration } = props; // ..