이번 글에서는 기존에 사용하던 Context API에서 Zustand로 마이그레이션 하게 된 썰을 한 번 풀어보려고 합니다. 처음에는 상태관리에 대해 잘 모르기도 했고 단순한 전역 상태만 관리하면 되겠지 싶었습니다.  그래서 Context API를 루트에 넣고, 하나 둘 Provider를 감쌌죠.하지만 어느 순간부터 컴포넌트가 불필요하게 리렌더링 되고 수정하지 않은 컴포넌트도 갑자기 반응하며 성능 저하 이슈까지 발생하기 시작했습니다.그때 든 생각은 하나였습니다."내가… 왜 그랬을까?"이 글에서는 Context API를 쓸 때 겪었던 리렌더링 이슈와 Zustand로 어떻게 개선했는지를 공유해보려고 합니다. 왜 나는 Context API를 선택했을까?사실 Context API는 제가 선택해서 사용한 기술은 ..

Lazy Loading을 사용하게 된 이유SejongPeer를 리팩토링하면서 성능 최적화를 하기로 했다.그 중 첫 번째 단계가 바로 Lazy Loading인데 무슨 개념인지 알아보자.Lazy Loading이란?보통 웹페이지를 불러올 때 페이지 전체에 대한 데이터(리소스)를 불러오면서 초기 로드 시간이 길어지고, 사용자가 당장 필요하지 않은 리소스까지 모두 다운로드하므로 불필요한 네트워크 사용을 초래한다.때문에 페이지 수가 수십 페이지 정도 되는 SejongPeer에게는 꼭 필요한 기능 중에 하나라고 생각했다.기존에 도입하려는 방식기존에는 React의 React.lazy()와 Suspense를 사용해 지연 로딩 중 로딩 상태를 표시하려고 했다.하지만 우린 프로젝트 사이즈가 크기도 하고 추후 React Qu..

이번 글에서는 페이지 라우팅 시 여러 가지 path를 사용하지 않고 하나의 URL의 쿼리 문자열 부분을 조작하여 읽어 라우팅을 하는 useSearchParams에 대해 작성해보려고 한다. useSearchParams란?주로 JavaScript 프레임워크와 라이브러리에서 URL 검색 파라미터를 관리하는 데 사용되는 개념이다.특히 react와 같은 SPA(Single Page Application)에서 많이 사용된다. 보통의 경우 URL의 쿼리 문자열은 `?`로 시작하여 `&`로 구분되는 키-값 쌍으로 이루어져 있다.예시로 알아보자 http://localhost:3000/survey/new/?step=1 위 주소는 현재 내가 하고 있는 프로젝트에서 설문 생성하기 페이지 중 1페이지를 가리킨다. 그..