로그인 확인

작성한 질문수 11

0

혹시그러면

pending 이나 rejected 일 때도 Todo/Product 메뉴가 보이고 Logout이 표시 가 될수 없나요 ?

        {loginState.email ?  //로그인한 사용자만 출력되는 메뉴 
        
        <>
        <li className="pr-6 text-2xl">
          <Link to={'/todo/'}>Todo</Link>
        </li>
        <li className="pr-6 text-2xl">
          <Link to={'/products/'}>Products</Link>
        </li>
        </>
        
        :
        <></>
        }

0

커스텀 훅으로 빼기 전에

 {loginStatus === 'pending' && <divclassName="bg-amber-300">로그인 중...</div>}

    {loginStatus === 'fulfilled' && <divclassName="bg-green-300">로그인 성공!</div>}

    {loginStatus === 'rejected' && <divclassName="bg-red-300">로그인 실패</div>}

부분 때문에 그렇게 생각하실 수 있습니다.

변경된 커스텀 훅을 보면 변수의 이름은 같지만 내용물은 조금 달라집니다.

  //로그인 상태 객체 

  const loginState =  useSelector((state: RootState) => state.loginSlice)

    //로그인 여부 

  const loginStatus = loginState.status

처럼 loginStatus는 true/false가 되고 loginState는 로그인한 사용자의 정보입니다(그래서 loginState.nickname처럼 사용하게 됩니다.

변수명이 동일해서 그렇게 느끼실 수도 있었겠네요..

혹시 몰라서 AI의 설명을 첨부합니다.

loginStatus === 'fulfilled'처럼 사용하실 필요가 없습니다. 지금 작성하신 코드처럼 {loginStatus && ...} 형태로 사용하시는 것이 맞습니다.

그 이유와 두 개념의 차이를 명확히 정리해 드릴게요.

1. fulfilled는 컴포넌트가 아니라 Redux 내부에서 쓰는 개념입니다

• loginPostAsync.fulfilled는 Redux Toolkit의 createAsyncThunk가 API 요청에 성공했을 때 발생하는 액션 상태(Lifecycle)입니다.

• 이는 컴포넌트가 아니라 loginSlice.ts 내부의 extraReducers에서 "로그인 API 통신이 성공했으니 스토어의 상태를 이렇게 바꿔라"라고 지정할 때 사용합니다.

2. 컴포넌트는 이미 처리된 '결과'만 가져다 씁니다

• 컴포넌트는 비동기 통신의 진행 단계를 직접 판별하는 곳이 아닙니다. 이미 비동기 통신이 성공하여 Redux 스토어에 저장된 최종 결과값(loginStatus)을 가져와서 화면에 보여주는 역할만 합니다.

• 따라서 loginStatus가 이미 true 또는 유효한 값으로 세팅되어 있기 때문에, 조건문에서는 단순히 존재 여부나 참/거짓만 판별하면 됩니다.

3. 만약 === 'fulfilled'를 쓰면 어떻게 될까요?

• loginStatus가 불리언(true/false) 타입이나 객체라면 === 'fulfilled'라는 비교문은 항상 거짓(false)이 되어 메뉴가 아예 나타나지 않는 버그가 발생합니다.

• loginStatus는 오직 로그인 상태 여부만을 깔끔하게 대변하도록 설계되었기 때문에, 지금처럼 {loginStatus && ...} 또는 {loginStatus ? (...) : null} 형태로 쓰는 것이 가장 올바른 리액트/리덕스 패턴입니다.

현재 작성하신 커스텀 훅과 컴포넌트 구조는 아주 정상적이니 이대로 사용하셔도 무방합니다

0

안녕하세요, 인프런 AI 인턴입니다. jyl08840님.

loginStatus가 로그인 상태를 'fulfilled', 'pending', 'rejected'와 같은 문자열로 관리되고 있다면, 로그인 완료 상태만 확인하기 위해서는 다음과 같이 작성하는 것이 더 정확합니다.

{loginStatus === 'fulfilled' && (
  <>
    <li className="pr-6 text-2xl">
      <NavLink to="/todo/">Todo</NavLink>
    </li>
    <li className="pr-6 text-2xl">
      <NavLink to="/products/">Product</NavLink>
    </li>
  </>
)}

현재처럼 loginStatus &&로 작성하면 빈 문자열 ''이 아닌 모든 문자열이 참으로 처리됩니다. 따라서 'pending'이나 'rejected'인 경우에도 메뉴가 렌더링될 수 있습니다. 로그인 성공 여부만 기준으로 메뉴를 표시하려면 loginStatus === 'fulfilled'처럼 명시적으로 비교하는 것이 적절합니다.

관련된 로그인 상태 및 커스텀 훅 사용 질문입니다.

• 로그인 관련 커스텀 훅 만들기 -&gt; 부분 질문입니다.
  

해당 질문의 코드에서도 loginState.status를 fulfilled, pending, rejected 상태로 관리하고 있습니다. 인증되지 않은 사용자의 접근까지 제어하려면 메뉴 렌더링 조건뿐 아니라 라우트 컴포넌트에서도 동일하게 로그인 상태를 확인하는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.