2024. 09. 09.(개별과제 01 useEffect)

 

1. 문제

개별 과제를 하던 중 로그인 하지 않은 사용자를 로그인 페이지로 가게 하기 위해 useEffect hook을 사용하였다.

useEffect는 사이드 이펙트를 처리하기 위한 hook인데 사이드 이펙트는 컴포넌트 렌더링 이외에 발생하는 모든 작업을 의미한다.

즉 리랜더링이 될 때마다 특정작업을 시행할 수 있도록 하는 hook이다.

useEffect는 () => {} <함수> 와 [] <의존성 배열> 로 구성되어 있는데

의존성 배열은 useEffect가 실행될 조건이 들어간다고 보면 된다.

처음에는 아래와 같이 코드를 짰다.

  useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, []);

 

위와 같이 의존성 배열이 비어있으면 컴포넌트가 처음 마운트될 때만 한 번 실행된다는 특징이 있다.

그렇게 되면 user 상태가 변경되어도 useEffect가 다시 실행되지 않게 되는 것이다.

(로그인 상태에 따라 페이지를 리디렉션하는 로직이 작동하지 않을 수 있다.)

 

2. 해결 코드

그래서 아래와 같이 의존성 배열에 user를 넣음으로써 user값이 변화함에 따라 실행되도록 변경하였다.

useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, [user]);