인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

코린님의 프로필 이미지
코린

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

프론트에서 로그인 상태 관련 질문드립니다

작성

·

136

0

강의 정말 잘 들었습니다

다른 토이 프로젝트를 진행하다 강의에서 배운 HOC를 활용하고 싶어 질문드립니다

1. HOC안에 넣을 컴포넌트가 만약 여러 개인 경우는 어떻게 하나요?

<Route exact path="/board/write">
<Ex1/>
<Ex2/>
 <Ex3/>
</Route>

이런식으로 되어있을 경우입니다

그냥 컴포넌트 구조를  다시 짜는게 바람직할까요? 

2. HOC같은 기능을 페이지 단위가 아닌 컴포넌트 단위로는 어떻게 적용하나요?

예를 들어 NavigationBar에 한 컴포넌트를 현재 로그인 상태의 반대로 로그아웃, 로그인 버튼을 랜더링 해주려 합니다.

제가 생각해본것은 userData ?  <LogoutBtn/> : <LoginBtn/>  이런식으로 랜더링 하는 것인데

이게 올바른 방법인지 궁금하네요

3. 쿠키에 저장된 토큰과 리덕스 사이에서 로그인 관련 상호작용이 궁금합니다

페이지 라우팅 해주는 곳에서 모든 페이지에 hoc처리를 해주고,

페이지 내 컴포넌트에서는 2번 질문에 제가 말한대로 하면 되는건가요?

감사합니다

답변 1

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요  
1. 이러한 문제를  React Hook을 이용해서 해결가능합니다. 
여기서 설명하기가 애매해서 제가 훅에 대해서 올려놓은게 있는데 보시면 도움이 될 거라 생각 됩니다. 

https://www.youtube.com/watch?v=C26vJqelKlA&list=PL9a7QRYt5fqlnuhU_Zgj2jKu6Ldw6UUCW&index=4&t=1s

2.   userData ?  <LogoutBtn/> : <LoginBtn/>  이런식으로 할 때는  Hoc에서 userData를 props로 내려주거나  리덕스에 값을 넣어서 처리해주실수 있습니다. 

코린님의 프로필 이미지
코린

작성한 질문수

질문하기