오늘 했던 것
- 팀원들의 PR 처리
- 현재 로그인 된 유저의 uid를
bcrypt로 암호화하여 사용 - 헤더의 UI 변경이 안 되는 것 처리
오늘의 문제
- 우리는 로그인 시
LocalStorage에 현재 로그인 한 유저의 정보를 담는다.
담는 동시에 헤더에서는LocalStorage를 읽어서 UI를 변경하도록 하였는데..
UI의 겉모습은 변경이 되는데 유저의 이메일 주소를 읽어오지 못 하는 문제였다.
이미지가 없다면 유저 이메일의 첫 글자를
유저 프로필 아이콘에 나타나게 하는 것인데..
문제 원인
- 컴포넌트의 구조상 헤더는 페이지들의
밖에 존재하는 레이아웃 컴포넌트였다.
따라서 페이지간의 이동을 해도 재렌더 되지 않는 것...
해결 방법
Header가 재렌더 되게 state를 쥐어주자
- 유저의 정보를 state로도 관리 해보자! 해서
redux의 module 중 user를 관리하는 모듈을 만들어
Header 컴포넌트의 state로 준 뒤
useEffect를 만들어 의존성 배열로 redux에서 받아온
state를 주었다.
잘 작동하였다
처음에는....
근데 새로고침 하니까 또 이메일이 없어져서
useRef를 사용하여 새로고침 해도 날아가지 않게
- 아예 redux의 유저 데이터가 변할 때 (로그인 시)
그 순간에 헤더의 useEffect 속에서 useRef에유저 정보 객체를 줘버리자!
하고 새로고침과 state의 변경에도 끄떡없는 유저의 정보를 담은 ref를 만들었다.
해결!!
느낀점
- 언젠가
useRef를 쓰게 될 줄 알았다.
이렇게 유용할 줄이야..
다만 로그인이나 로그아웃 같이 한 번만 작동하는 기능이라서
다행이라는 생각이 들었다.
만약 특정 상황에서 계속 변경을 해줘야 했다면
useRef보다 더 좋은 방법을 찾게 되지 않았을까.. 라며
안도의 한숨을 쉰다.
