1. UseEffect란?
렌더링 될 때, 특정한 작업을 수행할 때 설정하는 훅이다.
보통 네트워크에서 데이터를 가져올 때 또는 타이머 설정할 때 이용된다.
useEffect(콜백함수, [dependencies])
콜백함수를 조건부로 실행시키고 싶을 때 dependency array를 이용하며 이는 2번째 인자에 해당된다.
Q. 의존성 배열이란?
배열에 값을 넣으면 그 값이 바뀔때 만 useEffect를 실행하는 2번째 인자이다.
dependency array가 빈 배열일 때
: 컴포넌트가 마운트될 때만 콜백이 실행되고 이후에 리랜더링이 일어나도 콜백이 실행되지 않는다.
dependency array 자체를 선언하지 않았을 때
: 컴포넌트 마운트 뿐만 아니라 리랜더링 될때도 콜백이 실행된다.
➡️ 여기서 컴포넌트가 마운트된다는 의미는 DOM 객체가 생성되고 브라우저에 해당 컴포넌트가 나타날 때를 뜻한다.
새로고침 또는 해당 컴포넌트에 진입하면 컴포넌트가 최초
한번 생성되는데 이를 마운트라 한다.
<dependency array에 변수가 있는 경우 >
const [count,setCount] = useState(0);
useEffect(() => {
console.log('카운트가 증가할 때마다 실행해줘');
},[count]);최초 랜더링할 때 콜백함수가 호출되고, 배열 안의 변수
값이 변화할 때 마다 해당 함수가 불린다.
그러나 실제로 네트워크 통신을 할 때 useEffect 안에서
데이터를 불러올 때 콘솔창에 띄워봤다.
또한 useEffect는 해당 컴포넌트가 사라질 때도 동작할 수 있다.
useEffect(() => {
console.log('컴폰너트 리렌더링 중...');
return(() => {
console.log('Clean up!');
})
},[count]);➡️ 해당 컴포넌트가 사라질 때 마다 return문에 해당하는
함수를 실행한다.
Q. 이론상 useEffect는 dependency가 빈 배열이면 랜더링은 1번만 일어나야하는데 왜 2번이 일어날까?
A. 그 이유는 바로 엄격모드이기 때문이다!
index.js 파일을 보면 엄격모드 태그로 감싸져있는 것을
볼 수 있다.
2. 엄격모드
엄격모드는 애플리케이션 내 잠재적인 문제를 해결하기 위한 도구이다. 개발할 때 도와주는 도구로 개발 모드에서만
활성화된다!
React 공식 문서를 확인해보니,
React는 컴포넌트가 처음 렌더링 될 때 마운트를 시키고 자동으로 마운트 해제한 다음 다시 마운트된다.
두번째 마운트할 때 이전 상태로 복원한다고 한다.
➡️ 따라서 useEffect로 렌더링이 2번 일어나는 것은
Strict Mode로 일어나는 자연현상이다.
