9월 1일

useEffect

의존성 배열

• useMemo, useCallback, useEffect 에서 사용하는 개념
• 얕게 이해하면
  • useEffect 기준으로, 두 번째 인자로 넘기는 배열
  • 두 번째 인자를 넘기지 않으면 useEffect는 매번 실행되고, 빈 배열을 넘긴다면 컴포넌트의 첫 번째 렌더링 (마운트) 이후에만 실행됨

useEffect(callback, 의존성);

• 여기서 callback (effect) 은 함수의 형태로 표현되고, 의존성은 여러 의존성들을 한번에 전달하기 위해 배열의 형태로 표현된다
• 의존성이란 말을 해석해 보면
  • A라는 요소가 제대로 동작하기 위해 B, C, D 등 다른 요소를 필요로 할 때, A는 B, C, D에 의존하고 있다고 표현한다
  • ⇒ B, C, D는 A의 의존성이다
• 즉 의존성 배열이란
  • 무언가가 의존하고 있는 요소들의 모음
  • 여기서 무언가 = effect 함수 (첫 번째 인자로 들어가는 callback)
  • 쉽게 말해 effect 함수가 끌어다 사용하고 있는 외부 값들이 결국 의존성이라고 할 수 있다

function Component() {
	const [count, setCount] = useState(0);
	
	const effect = () => {
		document.title = `you clikced ${count} times`
	};

	useEffect(effect, [count]];
}

• count 변수는 effect 함수 외부에 있는 값이며, effect 함수가 돌아가기 위해서는 count 변수를 정확하게 파악하고 있어야 한다
• 함수 내부에서 사용하고 있는 ‘외부 변수’라면 함수가 의존성을 갖고 있다고 생각하면 된다
• 위의 예시에서 effect 함수는 count 값에 의존적이므로 의존성 배열에 추가해준다

의존성 배열의 잘못된 활용

function Component(){
	const [count, setCount] = useState(0);

	useEffect(()=>{
		document.title = `you clikced ${count} times`
	}, []];
}

• 필요 없는 요소를 굳이 의존성 배열에 넣는 실수는 잘 하지 않지만,
• 필요한 의존성을 제대로 의존성 배열에 넣어주지 않는 실수를 많이 한다