[React] useEffect

DH.J·2022년 10월 3일

React hook useEffect

React

목록 보기

8/15

useEffect & Dependencies

📍 useEffect

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지 알려준다.

React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것이다

useEffect(() => {
  (컴포넌트가 생길 때 수행 작업: mount);
  return {
      (컴포넌트가 사라질 때 수행 작업: unmount);
  }
}, [dependency])

🤔 When we use useEffect?

컴포넌트 전체가 리렌더링될 때, 특정 코드의 실행을 제한해야 한다.
렌더링이 계속 반복 된다면, 특히 특정 api를 계속해서 불러오는 문제가 생길 수 있다.
또한 반복되는 내용이 있기 때문이다. → 이로 인해 성능이 저하된다.
따라서 컴포넌트가 맨처음 렌더링 될때만 하고 그 다음은 실행되지 않게 해야 한다.

  useEffect(() => {
    fetch('<https://api.coinpaprika.com/v1/tickers>')
      .then(res => res.json()) // json 데이터를 객체로 만듬
      .then(json => {
        setCoins(json);
        setLoading(false); // 로딩 상태 false로 바꿈
      })
      .catch(err => console.log(err));
  }, []);

(이 예제를 통해 알 수 있듯이 계속해서 api를 불러오면 속도가 느려지기 때문이다,,)

그럼 예제를 통해 알아보자

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

여기서 useEffect 안에 있는 함수를 effect라고 한다

컴포넌트를 렌더링할 때 React는 우리가 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행한다

https://ko.reactjs.org/docs/hooks-effect.html

다른 예제를 통해 알아보자

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const storedLoggedInUserInfo = localStorage.getItem('isLoggedIn');

  if (storedLoggedInUserInfo === '1') {
    setIsLoggedIn(true);
  }

  const loginHandler = (email, password) => {
    localStorage.setItem('isLoggedIn', 1);
    setIsLoggedIn(true);
  };

로그인될때 loginHadler가 호출되어 localStorage에 1 데이터를 setting하는데 이것이 1일때 setIsLoggedIn이 다시 true가 되어 렌더링할 때마다 true가 되므로 무한 루프에 빠지게 된다

이때 useEffect를 이용해서

useEffect(() => {
    const storedLoggedInUserInfo = localStorage.getItem('isLoggedIn');

    if (storedLoggedInUserInfo === '1') {
      setIsLoggedIn(true);
    }
  }, []);

이렇게 바꾸면 dependencies의 상태 감지 변경이 있을 때만 해당 컴포넌트를 렌더링하게 된다

컴포넌트 전체가 렌더링되었을 때 실행된후, [ ] 안의 dependencies가 바뀌었을때만 렌더링된다

하지만 이 코드는 처음 한번만 실행되고 이후에는 다시 렌더링되어도 실행되지 않는다

그리고 logout을 눌렀을 때

const logoutHandler = () => {
    localStorage.removeItem('isLoggedIn');
    setIsLoggedIn(false);
  };

를 이용해서 local storage안의 key, value가 삭제되게 만든다

📍 Dependencies

// re-evaluated
  useEffect(() => {
    setFormIsValid(
      enteredEmail.includes('@') && enteredPassword.trim().length > 6
    );
  }, [enteredEmail, enteredPassword]);

이렇게 enteredEmail과 enteredPassword라는 state가 바뀔때 렌더링을 하게 만들 수도 있다

📍 clean up function

컴포넌트의 unmount이전, update이전에 어떤 작업을 수행하고 싶을 때 반환해주는 함수
마운트는 나타나는 것, 삭제 될 때는 언마운트라고 한다
cleanup function은 메모리 누수를 막고 불필요한 행동을 제거하고 어플리케이션 최적화를 돕는다

🤔 어떻게 작동하는가?

cleanup 함수는 effect 함수가 다음번에 작동하기 전에 실행된다
처음을 제외하고 useEffect 함수가 실행될 때마다 cleanup 함수가 실행된다
(side effect 함수가 맨처음 실행되기 전에 실행되지 않는다)
그리고 다음 side effect 함수가 실행되기 전에 실행된다

🤔 언제 사용해야 하는가?

https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

예제를 통해 알아보자

useEffect(() => {
    console.log('checking...');
    setTimeout(() => {
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 1000);
    // clean up function
    return () => {};
  }, [enteredEmail, enteredPassword]);