next.js dynamic routing
[] 대괄호 안에 미리 정해진 path명을 적어주면, 해당 폴더 이름 이외의 부분을 동적으로 라우팅하는 규칙을 만들 수 있다.
예를들어 label이라는 폴더 안에 [labelSeq].tsx라고 적어주면 Link의 href에 따라 동적으로 라우팅 되는 페이지를 만들 수 있다.
<Link href={'/label' + label.labelSeq}>...</Link>폴더구조
pages/label/[labelSeq].tsx
이중배열에서 쿼리값 받아오기
메뉴 구조에 child가 있을 때, child의 쿼리param은 어떻게 조회할까?
[{labelSeq: 1, child: [{labelSeq: 3}, {labelSeq: 4}]}] 이런 이중배열 구조일 때, labelSeq를 쿼리param으로 데이터를 찾아 전달해야 했다.
child까지 다 확인하는 방법에는 여러가지가 있겠지만 우선 이중배열 구조가 확실했고, depth가 더 깊어지지 않는 구조여서 이중반복문을 사용해서 구현해주었다.
이중반복은 시간복잡도가 O(n^2)이기 때문에 되도록이면 피하려고 했는데, 배열 depth의 끝을 확실하게 알 수 있고 데이터가 많지 않기 때문에 구현해줬다.
나중에 이 글을 다시 볼 때에는 더 좋은 방법이 생각나길 바란다.
데이터 흐름
useCallback과 useMemo를 이용한 성능 최적화 + 데이터 흐름 이해하기
label의 데이터를 조회하여 라우팅 된 query param과 일치하는 label의 데이터만 가지고 와야 하는 로직이 있었는데, 위에서 구현해준 이중배열에서 쿼리값을 받아오는 로직을 customhook으로 빼주었고, 해당 함수는 useCallback으로 감싸고, 해당 함수에서 얻어지는 값을 useMemo로 감싸주었다. 해당 함수에 넣어준 의존성배열의 값이 바뀔 때에 -> 함수가 다시 그려지게 되고 -> 함수가 다시 그려질 때 -> 값이 변경되는 흐름으로 구현해주었다.
서버에 데이터 요청이 보내지지 않는 이슈
searchQuery에 값을 담아, searchQuery의 값이 바뀔 때 마다 서버에 요청을 보낼 수 있도록 설정해둔 컴포넌트가 있었고, 나는 searchQuery를 변경시키는 어떠한 행위를 실행해주었는데, 이 행위가 적절할 때 일어나지 않아서 생긴 문제였다.
useEffect 의존성 배열에 적절한 값을 넣어주지 않아서 생긴 문제여서, 해당하는 데이터가 바뀔 때 마다 변경되도록 넣어주었더니 값이 변경할 때마다 서버에 요청이 성공적으로 보내졌다.
