[TIL] 리액트 라우터 기본 페이지 설정

TIL

 

1.

* 리액트 라우터를 이용해 라우팅 설정 후 기본 페이지를 설정하는 방법 : useEffect와 useNavigate를 이용해 마운트 시 특정 페이지로 연결

- 뒷동산 홈페이지 build 후 배포해 봤더니, 처음 로딩 시에는 메인 페이지가 렌더링되지 않고 빈 페이지만 나오다가, 메인 페이지로 이동하는 로고를 한 번 눌러줘야 렌더링되는 것을 확인했다. 기본 페이지를 설정하는 방법이 없나 해서 찾다가 첫 로딩(마운팅?) 시 특정 페이지로 이동하게 하는 hook 활용 방법을 찾음. 두 가지를 섞어서 이렇게 활용이 가능하구만!

- 참고 : useEffect+useHistory 방법 https://jforj.tistory.com/146 , useNavigate 사용법 https://basemenks.tistory.com/278

 

2.

- 1번을 해결하는 과정에서 다음과 같은 황당한 경고 메세지를 만났다. 
"message": "React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency arr"

어째서...? dependency array를 빈 배열로 넣어두면 마운팅할 때 한 번만 실행되도록 조건을 줄 수 있는 거 아니었어..?

혹시나 해서 실습 때 작성했던 코드를 확인했는데 같은 방식으로 사용되고 있었고 오류도 없었다 ㅠㅠ

몇 번 검색해 봤는데 잘 이해가 안 가기도 하고 작동에는 무리가 없어서 일단 보류하기로 했다.

- 검색결과 : https://kyounghwan01.github.io/blog/React/exhaustive-deps-warning/

 

---

회고

일요일인 어제 너무 노닥거린 느낌이 나서 잠깐 뒷동산 프로젝트를 손에 잡았다.

전에 대충 공부하고 적용했던 내용이 많아서 다시 읽어보고 복습하고 한두 가지 정도 작게 개선했다.

그런데 마침 오늘자 학습 분량이 어제 복습한 내용이지 뭐야..?

학습에 크게 시간이 들지 않아서 적당히 마무리한 뒤 뒷동산 업데이트를 다시 시작했다.

user flow chart를 이용해 한 번 사이트 구조를 정리해보고 나니까 가장 급하게 개선이 필요한 부분과 추후에라도 보충하면 좋을 내용들이 정리되었다.

그래서 주변에서 1차 피드백을 받고자 급한 부분들을 개선해 github 페이지로 배포해 봤다.

피드백 받으면 그 내용도 계획에 추가해야지.