[React] useParams, useEffect, 중첩라우팅

useParams()

 

useParams() 를 처음 사용하면서,

순수 js 로 url 의 id값을 구했을 때를 생각하면 너무 간단해서 놀랐다,,,

useParams 를 import 해 온 후에,  id 변수에 저장해주고

Route 태그의 path 에는 "경로/:id" element 에는 자식 컴포넌트를 적어주면

해당 id 값의 url 로 이동할 수 있게 해준다.

 

  const { id } = useParams<string>();

 

 

 

<Route path="edit/:id" element={ <GalleryEdit /> } />

 

---

 

useEffect 잘못 사용한 예시

 

의존성 배열에 '갤러리' 컬렉션에서 참조한 usersCollectionRef 라는 객체 값을 넣어주었다.

그랬더니 무한루프에 빠져 렌더링 되면서 useEffect 실행이 되고 실행되니까 state 값이 바뀌고 그래서 또 렌더링 되고,,

 

 

useEffect 파이어베이스 용량초과가 되어 하루 정도 다른 팀원들도 파베를 못 쓰는 일이 일어났다

한 번만 실행하면 되었기 때문에 [] 빈 배열로 넣어주어서 해결하였다.

 

그리고 한가지 더 알게된 사실은 App.tsx 에 strict 모드가 있으면 useEffect 가 2번씩 실행이 된다.

 

 

---

 

중첩라우팅 경로 조심

전체적인 라우팅 틀을 다른 분이 잡아주었고, 나는 그 안에 중첩라우팅을 사용하려고 했다.

그런데 내가 경로를 / 절대경로로 넣어주었더니 경로가 꼬여서

경로 지정을 직접적으로 /gallery/ 가 아닌 gallery/ 로 바꿔주어서 해결했다.

중첩라우팅을 사용하려면 경로를 꼼꼼하게 확인해야 한다.