마참내! 해결한 리액트 타입스크립트 로그인 하드코딩

안녕하세요?

 

리액트 타입스크립트를 사용하여 웹 프로젝트를 진행하고 있는데요. 개발 경험이 처음인지라 팀원분들께 너무나 신세를 지고 있습니다..

제가 오늘 이야기 하고자 하는 것은, 로그인 하드코딩을 하는 과정인데요.. 정말 쉬운 거지만 저에게는 어려웠던,, 그래서 이틀이나 해결하지 못했던 건데 드디어 해결했습니다.

 

수행해야 할 과제: 로그인 전, 후의 상태에 따라 헤더를 수정하는 것. 로그인 전일 경우, "로그인" 텍스트 띄우고 클릭하면 로그인 페이지로 넘어가기 /  로그인을 완료했을 경우, 프로필 아이콘과 함께 username을 띄워야 했습니다..

 

전자의 경우 수월했지만, 후자에서 많은 시간이 걸렸습니다.

결과 화면

 

일단, username에 값이 넘어올 경우를 '로그인이 된 상태'로 인지하게 하여 LoginComponent를 띄웁니다. 넘어오지 않으면(null) NotLoginComponent를 띄웁니다.

//Header.tsx

const [user, setUser] = useState<LoginProps | null>(null);

{/*나머지 코드들*/}

{user !== null ? (
          <LoginComponent user={user} onClick={handleLoginClick} />
        ) : (
          <H.LogoutText><NotLoginComponent onClick={handleLoginClick} /></H.LogoutText>
        )}

 

처음에는 너무 어렵게 생각해서, recoil 부분의 LoginState나 AuthProvider를 고쳤었는데요.. 사실 해결방법은 너무 간단했습니다!

 

그냥 헤더를 정의한 부분에 LoginProps를 넣어주고 임시 username과 password를 지정해줍니다. 그리고 기존의 로그인 버튼이 아닌, 임시 로그인 버튼을 만들어서 handelsubmit 함수를 만들어줍니다. 

const testUser: LoginProps = {
      username: 'testuser',
      password: 'testpassword',
  };

실제 로그인을 구현한 버튼을 사용하지 않는 이유는, 실제 구현해두었던 로그인 로직은 더 복잡하기 때문에, '로그인 상태를 만들기 위해' 거쳐야 하는 관문이 많기 때문입니다. 그렇기에 다음과 같이 임시 로그인 버튼을 누르면 setUser를 인지하여, username에 null이 아닌 값이 들어오도록 하는 것입니다.

 const handleLoginSimulation = () => {
        // 테스트용 사용자 정보로 로그인 시뮬레이션
        setUser(testUser);
    };

    const handleLogoutSimulation = () => {
        // 로그아웃 시뮬레이션
        setUser(null);
    };

 

그리고 나서 button Component를 추가합니다.

<LoginComponent user={user} onClick={handleLoginClick} />
        ) : (
          <H.LogoutText><NotLoginComponent onClick={handleLoginClick} /></H.LogoutText>
        )}
        <button onClick={handleLoginSimulation}>로그인 시뮬레이션</button>
            <button onClick={handleLogoutSimulation}>로그아웃 시뮬레이션</button>

 

이렇게 실행하면 로그인 상태를 하드코딩을 통해 만드실 수 있습니다.

 

감사합니다!