React 공식문서 useEffect

useEffect

useEffect 사용하는 이유

• 너무 오래걸리는 함수의 경우 UI 렌더링을 블록킹 할 수 있다
  -> useEffect는 렌더리잉 다 끝나고 읽기 시작하기 때문에 그런 문제를 보완해 줄 수 있다
• component 안에 바로 함수를 넣으면 리렌더링 될 때마다 매번 실행된다.
• debugging 용도로도 사용 하 ㄹ수 있다.

useEffect 사용법

1. 랜더링 될 때마다 안의 내용 실행

  useEffect(() => {
  });

2. 처음 마운트 될 때 1번만 실행

  useEffect(() => {
  }, []);

3. dependency 값이 변경 될 때마다

  useEffect(() => {
  	setData(data);
  }, [data]);

• 만약 dependency 부분에 여러개가 들어온다면 그중에 1개 라도 업데이트되면 리렌더링 됨

  useEffect(() => {
	setData1(data1);
  	setData2(data2);
  }, [data1, data2]);

그렇기 때문에 관심사 별로 나누어 useEffect 를 쓰면 좋다.

4. clean up Effect

• 이전에 일으킨 Side Effect를 정리할 필요가 있을 때 사용

예시) react 를 사용해서 spa 를 만드는데 그렇게 되면 해당 페이지를 벗어나도 window의 이벤트 리스너는 계속 살아있다. 그렇기 때문에 이 이벤트 리스너를 없앨 필요가 있다. 이때 return에 이 를 작성해 clean up 해 줄 수 있다!

  useEffect(() => {
	window.addEventListener("scroll", handleScroll)
	return () => {
		window.removeEventLisnter("scroll", handleScroll)
	}
  }, []);

sideEffect

(밖의 변수를 내부함수가 변경할 경우만 sideEffect 라고 생각했다. 하지만 그것보다 더 큰 범위를 sideEffect가 포함하고 있었다)

• 함수에서 함수안의 내용물로만 결과값을 만드는 것, 이외의 다른 행위들 -> sideEffect
• 함수의 output을 만들기 위해 외부의 값을 사용해도 -> sideEffect
• 외부 변수를 함수 안에서 변경 시킴 -> sideEffect