hooks - useEffect() 활용

useEffect를 사용하면서 어떤 경우에 사용했는지, 마운트, 언마운트, 업데이트 활용기에 대해 적어봅니다 -:) 조리있는 설명이 부족합니다.

👉 useEffect()

useEffect는 어떤 한 컴포넌트가 나타났을 때 실행하고자 하는 함수 또는 이벤트를 useEffect 안에 넣어줍니다.

import { useEffect } from "react";

function AppTest() {

  useEffect(() => {
    const getInitialState = async () => {
      await handleEvent();
    };
    getInitialState();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const handleEvent = () => {
    console.log('running');
  }

  return (
  <div></div>
  );
}
export default AppTest;

👉 mount

처음 AppTest라는 컴포넌트가 나타났을 때 handleEvent()라는 함수를 실행하게 됩니다.
해당 자리에는 주로 컴포넌트가 처음 나타날 때 실행되어야 하는 것, API를 불러올 수도 있구요!
주로 API를 불러오게 사용했던 것 같네요.

AppTest라는 컴포넌트에서 useEffect()를 활용하여 어떤 API를 불러올 때 그 API는 해당 컴포넌트를 처음 실행하거나 재실행 할 때만 통신 후 데이터를 가져오게 됩니다.

다른 경우는 잘 생각이 나지 않고 실제로 많이 활용했던 건 '탭'관련 기능인데,

위 그림과 같이 NEW 탭과 DONE 탭이 있는데, get으로 데이터를 가져오는 어떤 api를 호출한다고 해볼 때 각각의 리스트를 뽑아오는 부분에서 리스트의 상태에 대한 즉 new냐, done이냐의 값이 해당 api 호출의 parameter로 쓰일 때 인데요. (말이 너무 긴..)

new를 클릭하면 새로운 데이터만, done을 클릭하면 완료된 데이터만 가져와야 합니다.

👉 update

이 때 탭의 값이 변경될 때마다 useEffect를 실행시켜줘야하는데,
아래와 같이 탭과 관련된 값을 넣어주면 탭이 변경될 때 마다 해당 parameter를 대입해주며
api를 호출할 수 있겠죠?

아래는 예로 name이라는 값을 넣어 주었습니다. 그러면 name이 변경될 때마다 handleEvent() 함수를 실행하겠다는 뜻이 됩니다!

function AppTest() {

  useEffect(() => {
    const getInitialState = async () => {
      await handleEvent();
    };
    getInitialState();
  }, [name]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleEvent = () => {
    console.log('running');
  }

  return (
  <div></div>
  );
}
export default AppTest;

👉 unmount

unmount는 실제로 많이 써보지는 않았고 주로 localStorage 등에 데이터를 저장해둘 때 사용했습니다.

useEffect안에 localStorage에 필요한 값을 저장해 두었다가,
해당 컴포넌트를 벗어날 때 그 localStorage를 비워주고 싶을 때. 그냥 딱 생각나는게 이정도입니다.

아니면 redux를 사용하면서 store에 값을 저장해 두었던 것들을 해당 컴포넌트를 벗어날 때 비워야할 때 사용했죠! 어떤 값을 api로 보내기 도중에 사용자가 10개의 데이터 중 5개만 작성했고 이 5개는 작성 즉시 store에 저장을 했는데 그 컴포넌트를 벗어났다. 그리고 다시 새롭게 진입을 했을 때 이전에 작성했던 데이터가 store의 값을 가지고 들어가 있을 경우가 있었습니다.

그래서 아래와 같이 unmount를 통해 그 값을 비워 주었습니다.

아래의 간단한 unmount 예로는 AppTest 컴포넌트가 처음 실행될 때 state값을 1로 변경해주고, 해당 컴포넌트를 벗어날 때 다시 state값을 0으로 변경해주는 원리입니다.

function AppTest() {

const [state, setState] = useState(0);

  useEffect(() => {
    const getInitialState = async () => {
      await setState(1);
    };
    getInitialState();
    
    return () => {
    	setState(0);
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
  <div></div>
  );
}
export default AppTest;