개발 쌩초보 질문드립니다. 로그인 유지

Question

안녕하세요. 리액트로 로그인 여부에 따라 상태가 달라지는 네브바를 만들고 싶습니다.서버는 DRF이고, JWT토큰 방식으로 인증 로직을 구성, axios 라이브러리 사용, redux-toolkit으로 user상태 관리 중입니다.로컬 스토리지에 유저 정보를 저장해놓고 싶지 않아서 navbar 컴포넌트에 useEffect로 처음 렌더될 때마다 유저 정보를 받아오려고 하는데요. 현재 쿠키에 refresh 토큰 값을 저장하고 있습니다.redux-toolkit에 있는 유저 정보가 빌 때, 로그인 버튼을 출력하고, 그 이외에는 그 자리에 유저 정보의 이메일을 출력하려고 합니다. 반대로 유저 정보가 비어있는, 로그아웃 상태이면 그 자리에 로그인 버튼을 출력하구요.근데 이렇게 했더니 처음 렌더될 때 상태가 날아가고, 서버에서 비동기로 받아온 유저 정보 값이 다시 redux-toolkit에 업데이트되기까지 잠깐동안 깜빡거리는 현상이 생기더라구요. 아주 잠깐 '로그인 버튼이 출력됐다가 -> 이메일' 이런 식으로 말입니다.useEffect가 화면을 렌더링 한 후에 실행되고, axios가 비동기 처리함수이기 때문에 새로고침으로 날아간 초기 상태를 화면에 보여주기 때문에 그런 것이라고 추측하는데요. 이를 해결하기 위해서 어떤 로직을 구성해야할지 모르겠습니다. 시도해 본 방법은 다음과 같습니다.useLayoutEffect - 페인팅 전에 동기식으로 미리 값을 정해준다. 값을 dispatch 하기 위해서 axios요청까지 동기식으로 기다려야하는 게 찝찝한데, 로그인 상태에서는 새로고침시 원하는 식으로 출력되었지만, 새로고침 없이 로그아웃하면 아예 로그인 버튼이 다시 생겨나지를 않음. Suspense - 데이터를 받아오지 않았을 때 빈 값을 렌더링하도록 fallback 속성을 지정. 받아온 이메일이 있느냐 없느냐에 따라 로그인 버튼/이메일 출력 여부 결정 -> 로그아웃 상태에서 로그인 버튼이 다시 생겨나지 않음.시도한 방법이라고 적어놓긴 했지만, 제대로 구성된 로직이 아닌 것 같아서 여기까지 알아봤구나, 정도로만 봐주시면 감사하겠습니다.서버사이드렌더링 방식이 아닌 개발에서 로그인 여부에 따른 네브바 적용은 웹스토리지밖에(혹은 redux persist) 답이 없는 걸까요? 아니면 제가 시도한 위 두 방식으로 로직만 변경하면 충분히 구현해낼 수 있는 건가요?(왠지 이쪽일 거같긴 합니다)너무 많은 시도를 하다보니 코드를 올려드리진 못한 점 죄송합니다. 횡설수설이지만 도움 주시면 감사하겠습니다 ㅠㅠㅠㅠ

개이득인개발 · Accepted Answer

스캘레톤 처리하세요.

개발 쌩초보 질문드립니다. 로그인 유지

1개의 답변

Q&A 목록