20210306 18일차 로그인/로그아웃 로직 구현 완료

구현 사항

• 회원가입 후 자동 로그인
• 일반 로그인/로그아웃

컴포넌트들로 구성된 페이지의 경우 Props 를 이용하여 로그인 상태 변경 메소드와 로그인 상태를 전달하는 방식으로 구현했다.

로그인 상태를 전달하고 그 props 를 자식 컴포넌트에서 사용해야 리렌더링이 된다는 것을 깨닫는데 오랜 시간이 걸렸다. (상태가 업데이트 되어야 실행이 된다.)

결국 useEffect 함수를 사용하여 페이지를 렌더 시키는 방법인데, 로그인 상태와 토큰을 session storage 에 저장하여 useEffect 함수 안에서 사용하기 때문에, 새로고침을 해도 화면 상태가 유지된다.

예시는 회원가입 후 바로 로그인할 경우의 상태인 isSignUpIn 도 포함하고 있다.

useEffect(() => {
  const isLogin = JSON.parse(sessionStorage.getItem("isLogin") || "{}");
  const isSignUpIn = JSON.parse(sessionStorage.getItem("signUpIn") || "{}");
  const nickname = sessionStorage.getItem("nickName") as string;
  if (isLogin === true) {
    if (isSignUpIn === true) {
      setLoginMain(true);
	  } else {
		setLoginMain(signInStatus);
      }
        setNickName(nickname);
      } else {
        setNickName("");
        setLoginMain(signInStatus);
      }
      if (uemail.length > 0 && upassword.length > 0) {
       setMsgVisible(false);
      }
  }, [uemail.length, upassword.length, loginMain, signInStatus]);

본 웹 서비스의 페이지 구성이 독특하여 일반적으로 쓰이는 최상위 부모로부터의 props 전달 방식은 사용하지 못했다.

 

useEffect 의 두번째 인자에 특정 값을 넣는이유

.

useEffect 안에서 사용하는 상태나, props 가 있다면, useEffect 의 deps 에 넣어주어야 합니다. 그렇게 하는게, 규칙입니다.

만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면 useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 됩니다.

출처: react.vlpt.us/basic/16-useEffect.html