Side Effect

정의 : 앱 사이드에서 일어나는 모든 것을 지칭한다.

예시 : http Request를 보내는 것, 혹은 브라우저 저장소에 무언가를 저장하는 것

계속 재렌더링을 시킬만한 트리거나 State가 있는 컴포넌트에는 그런 요소들을 빼서 따로 관리하는 것이 바람직하다.

useEffect

예제

const [count, setCount] = useState(1);
const [name, setName] = useState("");

const handleCountUpdate = () => {
    setCount(count + 1);
  };

  const handleInputChange = (e) => {
    e.preventDefault();
    setName(e.target.value);
  };

// 렌더링 될 때마다 매번 실행된다.
  useEffect(() => {
    console.log("렌더링");
  });

// 처음 렌더링될 때만(= 첫 마운트 될 때만) 실행되고 끝난다.
  useEffect(() => {
    console.log("첫 렌더링 이후 X");
  }, []);

  // 마운트  + [count] 변경될때마다 실행된다.
  useEffect(() => {
    console.log(" count 변화 ");
  }, [count]);

  // 마운트  + [name] 변경될때마다 실행된다.
  useEffect(() => {
    console.log(" name 변화 ");
  }, [name]);

return (
<button onClick={handleCountUpdate}>Update</button>
        <span>count : {count}</span>
        <br />
        <span>name : {name}</span>
        <input type="text" value={name} onChange={handleInputChange} />
)

useEffect를 활용한 디바운싱 구현

setTimeout()과 clearTimeout()을 활용하면 디바운싱 구현하기가 편리하다.

// ...코드 생략

// useEffect를 활용한 디바운싱 구현
  useEffect(() => {
✅    const identifier = setTimeout(() => {
      console.log("Email : ", enteredEmail);
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 1000);

    return () => {
      console.log("Clean Up");
✅      clearTimeout(identifier);
    }; // clean up 함수는 첫 번째 사이드 이펙트가 실행되기 전에는 실행되지 않는다.
  }, [enteredEmail, enteredPassword]);

useEffect return clean up 함수는 첫 번째 사이드 이펙트가 실행되기 전에는 실행되지 않는다.