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
함수의 output을 만들기 위해 외부의 값을 사용해도 -> sideEffect
외부 변수를 함수 안에서 변경 시킴 -> sideEffect