본문 바로가기
728x90

React2

검색 파라미터 🔍 검색 파라미터는 사실상 UI 상태를 직렬화한 표현이다.예를 들어, 사용자가 상품 목록을 보고 있을 때 필터: filter=active 정렬: sort=asc 페이지네이션: page=2 이 값들이 URL에 들어가면 아래와 같은 장점이 생긴다. 브라우저 히스토리 지원: 뒤/앞으로 가기 시 동일한 상태를 복원할 수 있다.딥링크 가능: 특정 상태를 URL로 공유하면 다른 사용자가 동일한 화면을 볼 수 있다.공유 가능: URL을 복사하여 다른 사용자에게 보내면 동일한 필터와 정렬 상태가 유지된다. 왜 대부분의 앱은 문자열 파싱에 의존할까? window.location.search나 URLSearchParams로 접근하는 방식이 대부분이다.이 방식은 단순하지만 한계/문제가 있다. 타입 안전성 부족 모든 값이 문.. 2025. 12. 15.
use server와 use client 📡 React (특히 Next.js 13 이후 버전이나 React Server Components 환경)에서 사용하는 use client와 use server는 컴포넌트가 실행될 위치 (브라우저 vs 서버)를 명시하기 위한 지시자를 말한다. use client클라이언트 컴포넌트 선언브라우저에서 실행되어야 함을 명시하는 지시어React 18부터 도입된 Server Components에서는 기본적으로 모든 컴포넌트가 서버에서 렌더링되는데 이때, use client가 있어야 브라우저 전용 기능들을 사용할 수 있다. 사용 시점useState, useEffect, useRef 같은 React Hook을 쓰는 경우window, document, localStorage등 브라우저 API를 쓰는 경우사용자 인터렉션이 필.. 2025. 8. 14.
728x90