TIL 2023-06-06

1. 오늘 겪은 문제

1. localstorage에 담긴 정보로 상태관리 및 유지하기
2. useNavigate 사용시 문제점

2. 해본 시도

1. localstorage에 저장해놓은 유저정보로 페이지별로 유저 정보 state를 설정하기 위해서 useEffect훅을 사용하여 설정해주고 있었으나, 페이지 이동시 useNavigate or Link태그 사용시 이전의 상태가 유지되어서 유저 상태가 제대로 유지되지 않는 현상이 발생해서, useEffect 내부에 async 함수로 적용해본다던가, cleanup 함수를 사용한다던가 해봤으나 효과가 없었다.
2. 앞서 말한 것처럼 useNavigate를 사용시 이전의 상태를 유지하기 때문에 로그인하고 메인화면으로 왔을 때 새로고침을 하기 전에는 해당 상태가 반영되지 않는 현상이 있었다. 해서 window.location.replace 함수 사용을 시도했다.

3. 해결 방법

1. https://www.daleseo.com/react-hooks-use-web-storage/ 해당 게시글을 통해서 해결할 수 있었다.
2. 해결!

4. 새롭게 알게 된 점

• react에서의 개발 자유도는 훅을 얼마나 잘 다루느냐로 결정된다 라고 생각하게 되었다.

5. 오늘 더 효율적으로 일할 수 있었을 것 같은 방법은?