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
함께 읽은 게시물
Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들
최
... 더 보기
Longest Common Subsequence 자바스크립트 풀이
코
... 더 보기주니어 개발자들이 읽으면 좋은 테크 아티클 모음📚
F-Lab 에서 주니어 개발자들이(사실 개발자라면 누구나) 보시면 좋을 아티클 모음을 공유해 주었네요!
검색엔진부터 비동기 처리, NoSQL 등 다양한 분야의 아티클들이 공유되어 있으니 관심있으신 분들은 보시면 좋겠습니다.
F-Lab 에서 공유해주신 아티클 주제를 나열해보면 다음과 같습니다.
📌 구글이 직접 말하는 검색엔진의 원리 (tali.kr)
📌 검색 엔진은 어떻게 작동하는가 (xo.dev)
📌 네이버의 검색엔진의 특징과 알고리즘 (tistory.com)
📌 [네이버 블로그]네이버 검색의 원리 : 네이버 블... 더 보기
