많은 양의 데이터를 다루는 서비스에서 검색 기능은 필수적이죠? 이번 포스팅에서는 아래와 같은 웹에서 흔히 볼 수 있는 검색 UI를 React로 함께 구현해보겠습니다. 검색창 컴포넌트 구현 검색창(SearchBox) 컴포넌트에는 사용자가 검색어를 입력하므로 기본적으로 HTML의 <input> 요소를 사용합니다. 이때, 접근성을 위해 type 속성을 search로 설정해 주세요. 스크린 리더 사용자에게는 매우 중요한 정보이기 때문입니다. 부모 요소에서 상태 관리를 하기 위해서 <SearchBox /> 컴포넌트는 prop으로 value와
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(filter)는 사용자가 데이터를 추려낼 수 있는 도와주는 매우 중요한 UI입니다. 이번 포스팅에서는 아래와 같은 간단한 상품 목록 페이지를 구현하면서 필터(filter) UI를 어떻게 React로 개발하는지 알아보겠습니다. 상품 목록 컴포넌트 구현 우선 단순히 모든 상품 목록을 보여주는 React 컴포넌트를 작성하겠습니다. <Products/> 컴포넌트는 prop으로 상품 배열(products)와 로딩 여부(loading)를 받습니다. 그리고 아직 데이터를 로딩 중이라
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
양식(form)은 사용자로 부터 데이터를 입력 받기 위해 웹애플리케이션에서 필수적인 요소임에도 불구하고, 리액트(React)로 직접 구현을 해보면 생각보다 고려해야 부분이 많다는 것을 느끼게 됩니다. 이번 포스팅에서는 React Hook를 이용해서 좀 더 깔끔하게 양식 UI를 구현하는 방법에 대해서 알아보겠습니다. 상태 관리 코드 분리하기 기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성됩니다. 이렇게 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게