React로 필터 UI 구현하기 (+ URL 동기화)
www.daleseo.com
React로 필터 UI 구현하기 (+ URL 동기화)
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(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
댓글 0
함께 읽은 게시물
🪄 플레이모어와 함께할 동료를 찾습니다
첫
... 더 보기
토스에서 만든 FE 코드 지침서
... 더 보기
< 이직을 고민하는 당신이 던져야 할 단 3가지 질문 >
1. 커리어를 선택하는 기준은 다양하다. 일단 내가 가진 가치관이 가장 큰 영향을 준다. 남들의 시선과 판단도 무시할 수 없다. 이직 트렌드와 경향도 살펴봐야 한다.
... 더 보기
