티스토리 뷰
배경
저번 글에서는 웹에서 데이터를 저장하기 위한 방법 중의 하나인 웹 스토리지를 잘 사용하는 방법에 대해 얘기했다.
사실 웹에서 데이터를 저장하기 위한 방법중에 웹 스토리말고 다른 방법도 존재한다. 예를 들어보자. 나는 쇼핑몰에서 20대이상 남성 필터를 걸었다. 그리고 내가 필터를 건 페이지를 친구에게 공유하고 싶다. 그런데 웹 스토리지는 컴퓨터마다 브라우저마다 독립적으로 동작한다. 이럴때 사용할 수 있는 방법이 쿼리파람이다.
기본적인 맥락은 프론트 개발을 하다보면 누구나 쿼리파람을 사용한다.
쿼리파람
리약트로 예시를 들어보자. 저번 글에서 설명한 로컬스토리지와 유사한 부분은 가볍게만 설명하고 넘어가겠다.
1. 쿼리파람 연동하기
1. useState로 상태를 관리하고 있었다.
2. 그 상태를 쿼리파람에 저장해달라는 요청을 받았다.
3. useState의 initialState와 setState부분에 쿼리파람을 연동한다.
문제점
queryParam을 사용할 때마다 불필요한 보일러 플레이트가 생긴다.
2. 쿼리파람과 useState 연동하기
useLocalStorage처럼 훅을 만들면된다. (react router v6에서는 useSearchParams라는 훅을 만들었다.)
문제점
useSearchParams 훅을 살펴보면 searchParams.get(key)으로 매번 쿼리파람에 해당하는 값을 불러와야한다.
반면에 useLocalStorage에서는 key를 인자값으로 받는다.
비슷한 요구사항을 충족시키기 위해서 훅을 만들었는데 어째서 useSearchParams는 key를 인자로 받지 않는걸까?
쿼리파람은 하나의 페이지에 여러개를 가질 수 있다. 네이버 쇼핑에서 이것저것 버튼을 눌른 화면의 URI를 살펴보자.
살펴보니 category와 menu라는 쿼리파람을 사용하고 있다. 이렇게 쿼리파람은 여러개를 같이 관리해야하는 경우가 많다.
3. 쿼리파람 별로 훅을 분리하기
만약 쿼리파람과 useState를 1대1로 연동하고 싶다면 useQuerySingleState, useQueryMultiState 같은 훅을 만들면 된다. 그리고 이 훅을 기반으로 useQueryMenuState같은 훅을 만들면 된다.
문제점
menu라는 쿼리파람은 A컴포넌트에서 변경할 수도 있고 B컴포넌트에서 변경할 수도 있다. 즉 동기화하는 코드가 필요하다. 즉 불필요한 useEffect코드가 필요하다. 또한 쿼리파람을 복잡하게 사용하는 경우 react의 batch 문제도 발생한다.
4. 상태관리 라이브러리의 미들웨어에서 쿼리파람 변경하기
로컬스토리지처럼 미들웨어에서 변경하면 된다. 그런데 로컬 스토리지처럼 간단하게 되지는 않는다.
문제점
1. 다른 페이지로 이동한다면 쿼리파람값이 사라진다.
2. 페이지 진입시 쿼리파람을 초기화시켜야한다.
3. 쿼리파람은 전역 상태가 아니라 페이지마다 상태를 관리해야한다.
해결방법
1. 페이지 진입시 쿼리파람 상태를 초기화시킨다.
2. 페이지 혹은 도메인별로 쿼리파람 상태를 관리한다.(ex) Foo라는 상태안에 page, category, menu, optionFilters 등의 쿼리파람 상태를 넣는다.)
결론
결국은 쿼리파람이 상태로 사용하기 쉽기 때문에 이런 문제가 발생했다. 또한 로컬 스토리지와 달리 URI를 다루기 때문에 sideEffect가 많이 발생한다. 원점으로 돌아가보면 기본적으로는 프론트엔드에서 상태관리를 하고 부가적인 역할로 쿼리파람을 적용하는 것이다.
하지만 가벼운 작업이라면 굳이 그럴 필요는 없어보인다. 그냥 useSearchParams훅으로만 관리해도 충분하다.
쿼리파람의 복잡도에 따라 적절한 선택을 하면 괜찮지 않나? 라는 생각을 해보며 글을 마무리한다.
'웹' 카테고리의 다른 글
| 프론트에서 모호한 것들 그리고 해결방법 3편(props 드릴링) (2) | 2024.01.10 |
|---|---|
| 프론트에서 모호한 것들 그리고 해결방법 1편(웹 스토리지) (2) | 2023.12.22 |
| 추상화 나도 할 수 있을지도??(웹 프론트) 1편 (2) | 2023.09.24 |
| 토스 slash 라이브러리 까보기(emotion-utils 1) (0) | 2022.10.26 |
| usestore 라이브러리 까보기 2편(feat. feconf 상태관리) (0) | 2022.10.17 |