useEffect

useEffect?🍓

Side Effect : 부수적인 효과로 함수가 어떤동작을 할때 input, output이외의 다른값이 조작된다면 그것은 side Effect가 있다고 한다.

let count = 0;
function greetWithSideEffect(name) {
  // Input
  count = count + 1; // Side Effect!
  return `${name}님 안녕하세요!`; // Output
}

side Effect의 예시

function greetWithSideEffect({ name }) {
  // Input
  // Bad!
  document.title = `${name}님 안녕하세요!`; // Side Effect

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

side Effect의 잘못된 예시)=>

함수 컴포넌트의 리턴 값은 UI 요소이고, state, props의 변화가 있을 때마다 함수가 실행된다. 이 말은 매 렌더링 때마다 함수 body에 있는 렌더링과 무관한 로직이 렌더링 과정에서 실행되기 때문에 렌더링 자체에 영향을 줘 성능 상 악영향을 끼칠 수도 있다.

---

useEffect : 함수형 컴포넌트의 훅(기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게해주는 기능)으로서 컴포넌트가 렌더링 이후에 수행해야 할 일을 리액트에 전달하는 기능을 가지고 있다. 즉)Side Effect가 렌더링에 영향을 주지 않도록 설계됨

import { useEffect } from "react"

// 사용법
useEffect( 실행시킬 동작, [ 타이밍 ] )
document.addEventListener("타이밍", 실행시킬 동작) // 추상화 한 예시

// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
}, [value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
  // Side Effect
}, [])

useEffect의 사용법

---

Clean up Effect : useEffect의 return값에 이전에 일으킨 Side Effect를 정리하는code를 작성하는 하는것이다.

useEffect(() => {
  function handleScroll() {
    console.log(window.scrollY);
  }

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

return값에 이벤트를 지워주는 로직을 생성함으로써 페이지를 이동할때(component가 unmount될때)

이벤트가 정리되어 성능저하를 막을 수 있음.

const App = () => {
  const [count, setCount] = useState(0);

  console.log("render", count);

  useEffect(() => {
    console.log("useEffect Callback", count);
    return () => {
			console.log("cleanUp", count);
		});
  }, [count]);

  return <div onClick={() => setCount(count + 1)}>하잉</div>;
};

export default Foo;

버튼을 한번 눌렀을때 찍히는 콘솔의 값들을 예상해보자.

render, 0
useEffect Callback, 0

// 클릭

render, 1
cleanUp, 0
useEffect Callback, 1

이 code를 통해 cleanup 함수가 deps에 아무값도 넣지않았을 경우에는 컴포넌트가 unmount 될때만 실행되고

deps에 특정값을 넣었다면 그 값이 업데이트되기 직전에 실행되는것을 알 수 있다.

참고* deps는 useEffect의 2번째 인자인 [] 배열을 뜻한다.