useEffect ...
많이 사용한 hooks 이지만, 제대로 알지 못했던 과거의 나 ...
쓸 줄 안다고 잘 아는 것은 아니다 🙃

🪄 useEffect

1. 의존성 배열에 아무것도 담지 않을 때

  useEffect(() => {
  	console.log("Mount!");
  }, []);

• 페이지가 Mount 될 때(렌더링 될 때)에만, 콜백함수가 실행된다.

2. 의존성 배열을 넣지 않을 때

   useEffect(() => {
     console.log("Update!");
   });

• state가 바뀌는 등의 모든 변화, update가 일어날 때마다, 콜백함수가 실행된다

3. 의존성 배열에 어떤 값을 넣었을 때

   useEffect(() => {
     console.log(`count가 변화되었습니다 -> ${count}`);
   }, [count]);

• 의존성 배열에 들어가 있는 값만 감지하여, 그 값이 변화될 때마다, 콜백함수가 실행된다.

4. useEffect의 return 을 설정해줄 때

useEffect(() => {
    console.log("Mount!");

    return () => {
      console.log("UnMount!");
    };
  }, []);

• return 에 콜백함수를 작성해주면, 페이지가 UnMount 될 시에 해당 함수를 실행한다.