센세 로그인된 user가 아니라면 페이지 접속못하게하기

[정중식]

구현 질문있습니다.


사진처럼 App.js에서 로컬호스트에 넣은 user를 하위 컴포넌트에 전달해주는식으로 user가 아니라면 페이지를 못들어가는식으로 구현했는데요,

근데 잘되는줄알았는데 아니더라구요..

로그인할때 로컬스토리지에 user정보를 집어넣고 '/'으로 돌아가게끔해주고있는데, 로그인하고 '/' 로 돌아가면 user가 null로 나옵니다.

정확하게는 App.js에서 console.log(user); 해보면 null로 나옵니다.

왜 그런가 했더니 App.js에서 재랜더링을 안해주고있더라구요

당연히 값 변화가없으니 App.js에서는 재랜더링을 안해준거겠지만..  그래서 이런생각을했어요

1. 어차피 로그인할때 로컬스토리지에도 user정보를 넣고, 전역 state에도 user정보를 넣어줬으니깐..

2. App.js에서 useSelector로 user정보를 불러와서 하위 컴포넌트에 뿌려주자!

3. console.log(user);를해주면 로그인후 '/'로 가면 콘솔에는 처음엔 null을, 그후엔 user정보를 출력해주더라구요.





이렇게해도.. 괜찮을까요?

+ 근데 문제는 이렇게하면 로그인유저가 글쓰기페이지에서 새로고침을하면 '/' 로 가버리는 귀찮은 현상이벌어집니다.ㅠ.ㅠ
( 왜냐면 그때 선생님이 말씀해주셨던것처럼 state는 바로바뀌는게 아니라 밀렸다가 다음으로 코드부터 동작하고 바뀌는..일명 밀리는현상때문에 처음은 null되기때문에)
  그럼 역시나 방법은 아래 제가 댓글단것처럼 해야할까요?

[정중식]

user가 필요한 컴포넌트마다  일일히 
const user = JSON.parse(localStorage.getItem('userInfo')); 
를 작성해주고 거기서 user를 사용하는 방법이 가장 단순하기는한데.. 반복적인 코드가 사용되는거니깐 App.js에서 한번에 처리해줄수있는 방법이없을까요?

[codingapple]

넴 state에 저장해서 쓰는게 제일 편합니다 
미로그인시 /로 돌아가라고하는거보다 그냥 html 내용만 안보여줘도 됩니다

[글쓴이]

글