React로 필터 UI 구현하기 (+ URL 동기화)
www.daleseo.com
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(filter)는 사용자가 데이터를 추려낼 수 있는 도와주는 매우 중요한 UI입니다. 이번 포스팅에서는 React로 간단한 상품 목록 페이지를 구현하면서 필터 UI를 어떻게 구현하고, 더불어 URL과 동기화할 수 있는 방법을 알아보겠습니다.
📝 포스팅: https://www.daleseo.com/react-filter/
🧑💻 실습 코드: https://codesandbox.io/p/sandbox/react-filter-yp37qj
React로 양식 UI를 구현하는 기본적인 방법이 궁금하시다면 아래 게시물을 참고 바랍니다.
📙 React로 양식(form) UI 구현하기: https://careerly.co.kr/comments/86324
🚥 React에서 라디오 버튼 사용하기: https://careerly.co.kr/comments/100504
✅ React에서 체크박스 사용하기: https://careerly.co.kr/comments/100966
📔 React Hook Form 라이브러리 사용법: https://careerly.co.kr/comments/87155
React 컴포넌트를 스타일하는 다양한 방법이 궁금하시다면 아래 게시물을 참고 바랍니다.
📕 React 컴포넌트 CSS 스타일링 기본: https://careerly.co.kr/comments/86222
📗 Styled Components로 React 컴포넌트 스타일하기: https://careerly.co.kr/comments/86823
📘 Emotion으로 React 컴포넌트 스타일하기: https://careerly.co.kr/comments/88931
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 7월 3일 오후 10:07