useEffect 함수와 return

편두통이...쎄게 찾아온날.. 두통을 이겨내며 useEffect에 대해 새로 터득한 지식을 정리해보자.

 

React에서 생명주기를 담당하는 훅이라고 배운 useEffect

내가 기억하기로는 리액트에서 useState를 사용해서 상태값을 만들어 주면, 그  값이 변경될때마다 화면을 새롭게 렌더링하는데...! 이 부수효과를 컨트롤 하기 위해서 useEffect를 사용한다고 했다.

state값이 바뀜에 따라 렌더링이 바뀌어야할 때도 있고, 바뀌지 말아야할 때도 있으니까 

state의 기본 동작을 제어해준다고 보면 되겠다.

 

useEffect( ()=>{ 실행될 함수 }, [의존할 상태])

이런 모양새로 알고 있었는데 return을 사용해서 리소스를 해제하는방법(클린 업) 도 있었다.

 

 

useEffect(()=>{
실행될 내용 1 ; 
실행될 내용 2 ;

return () => {
		
		};

},[])

기본적으로 useEffect 함수는 등록된 함수가 호출되는 상황을 정의한다. 의존성을 나타내는 [] 배열 인자에 아무것도 없으면 처음 렌더링할때(새로고침 포함) 만 useEffect에 등록된 함수가 실행된다는 의미이고

배열에 상태값이 등록되어있을 경우, 그 상태가 변할때마다 함수가 실행된다.

 

그럼 return에 들어가는 함수는 뭘까? useEffect에 등록된 함수를 모두 실행 한 후에, 이전 effect를 정리하기 위해 사용된다.

즉 다음 useEffect 호출전에 실행된다. 

 

 useEffect(() => {

    const unsubscribe = onAuthStateChanged(auth, (user) => {

 

      if (user) {

        if (user.metadata.creationTime !== user.metadata.lastSignInTime) {

          fetchNickname(user.uid).then(()=>{setUser(user)})

        } else {

        navigate("/login");

        setUser(null);

      }

      //user가 null일때

    }else{

      setUser(null);

    };

    //클린업

    return () => {

      unsubscribe();

    };

  }, [user]);

여기서

useEffect에 등록된 함수는 unsubscribe이다. firebase의 onAuthStateChanged 메소드인데,  사용자의 인증상태의 변화를 감지한다. 즉 코드를 해석해보면

unsubscribe 함수는 사용자의 인증상태가 변경이 될때 실행이 되며 크게 user 가 true일때와 null일때의 로직을 각각 처리해주고 있다. 

그리고 return에서 다시한번 unsubscribe()를 실행해주고있는데,  다음 effect가 실행될때, 즉 의존성에 등록된 user 상태가 변했을때 다시 unsubscribe가 실행되는데 그 전에 다시한번 unsubscribe를 실행시켜 user의 인증상태를 반영한다는 뜻이다.

 

그런데 블로그를 쓰다보니 내 코드에서는 클린업 처리가 필요가 없다는걸 알았다. 로그아웃 하면 어차피 리랜더링 되니까 정리작업이 굳이 필요하지 않은것 같다.

 

결과적으로 클린업 함수를 삭제하고 state도 정리해서 불필요한 코드를 싹 삭제하고 리팩토링 했다.