React) 로그인 유저인지 확인하는 페이지에서의 렌더링

Question

React 프로젝트를 리팩토링중인데요, zustand로 로그인 상태를 관리하도록 변경하는 중에 궁금증이 생겼습니다.로그인이 필요한 페이지 라우터를 감싼 Wrapper 컴포넌트를 만들어서 사용자의 로그인 상태를 확인합니다.이때 토큰이 없다면 /loginRequired로 보내고, 토큰이 있다면 서버로 유효한 토큰인지 보내서 응답을 확인합니다.이 로그인 확인 과정에서 렌더링이 한번 발생하고, 이후에 다시 API로 데이터를 받아오는데 렌더링이 한번 더 발생해서 총 초기 렌더링이 2번씩 일어나는데 원래 이렇게 두번씩 발생하는 게 맞나요? 아니면 더 효율적인 방법이 있나요?

T___T · Answer

상태가 연결된 컴포넌트의 상태를 업데이트하면 리렌더링되는건 자연스러운 현상입니다.하지만 질문의 요지를 고려해볼때 불필요한 리렌더링에 대해 걱정하시고 있는것 같은데, 리액트는 렌더링 만으로는 DOM 을 업데이트 하지 않습니다.렌더링, 조정, 커밋 단계를 거친 뒤에 "변경사항이 있다면" DOM을 업데이트하는데에 있어, 위 사항은 로우엔드 기기에서도 문제가 없을 것 같습니다만, 문제가 있다면 DOM이 업데이트가 되는 부분이 가장 느리기 때문에 "커밋" 단계에서 느린 코드가 있는지 React Dev Tools 프로파일러 등으로 확인하는 게 좋아보입니다.

React) 로그인 유저인지 확인하는 페이지에서의 렌더링

1개의 답변

#zustand 목록