많은 양의 데이터를 다루는 서비스에서 검색 기능은 필수적이죠? 이번 포스팅에서는 아래와 같은 웹에서 흔히 볼 수 있는 검색 UI를 React로 함께 구현해보겠습니다. 검색창 컴포넌트 구현 검색창(SearchBox) 컴포넌트에는 사용자가 검색어를 입력하므로 기본적으로 HTML의 <input> 요소를 사용합니다. 이때, 접근성을 위해 type 속성을 search로 설정해 주세요. 스크린 리더 사용자에게는 매우 중요한 정보이기 때문입니다. 부모 요소에서 상태 관리를 하기 위해서 <SearchBox /> 컴포넌트는 prop으로 value와
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(filter)는 사용자가 데이터를 추려낼 수 있는 도와주는 매우 중요한 UI입니다. 이번 포스팅에서는 아래와 같은 간단한 상품 목록 페이지를 구현하면서 필터(filter) UI를 어떻게 React로 개발하는지 알아보겠습니다. 상품 목록 컴포넌트 구현 우선 단순히 모든 상품 목록을 보여주는 React 컴포넌트를 작성하겠습니다. <Products/> 컴포넌트는 prop으로 상품 배열(products)와 로딩 여부(loading)를 받습니다. 그리고 아직 데이터를 로딩 중이라
React로 SPA(Single Page Application)를 개발하는 경우 window.location 객체에 접근할 때 여러가지 문제가 발생할 수 있는데요. SPA에서는 보통 클라이언트 단에서 랜더링을 하기 때문에 브라우저의 location 객체를 사용할 때 조금 더 세심한 고려가 필요합니다. 이번 포스팅에서는 React 앱에서 브라우저의 location 객체에 안전하게 접근하는 방법과 이를 위한 커스텀 훅(hook)을 구현해보도록 하겠습니다. 브라우저의 location 전역 객체 우선 브라우저의 location 객체에 대해
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
웹 페이지에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. React로 완성도 있는 테이블 컴포넌트를 개발하려면 이외로 고려할 부분이 많아서 생각보다 많은 시간과 노력이 들어가게 되는데요. 이번 포스팅에서는 Material UI를 이용하여 좀 더 손쉽게 테이블 UI를 구현해보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. 필요한 컴포넌트 HTML을 사용해서 테이블의 열과 행의 골격을 만들 때, <table> 엘리먼트 뿐만 아니라, <
양식(form)은 사용자로 부터 데이터를 입력 받기 위해 웹애플리케이션에서 필수적인 요소임에도 불구하고, 리액트(React)로 직접 구현을 해보면 생각보다 고려해야 부분이 많다는 것을 느끼게 됩니다. 이번 포스팅에서는 React Hook를 이용해서 좀 더 깔끔하게 양식 UI를 구현하는 방법에 대해서 알아보겠습니다. 상태 관리 코드 분리하기 기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성됩니다. 이렇게 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게
양식(form)은 웹 애플리케이션에서 사용자로 부터 데이터를 입력 받기 위해 필수적인 UI 요소이죠? 그런데 리액트(React)로 직접 양식 UI를 구현해보면 처음에 생각했던 것보다 고려해야 할 부분이 많다는 것을 깨닫게 되는데요. 이번 포스팅에서는 비밀번호를 변경하기 위한 전형적인 양식 UI를 React 컴포넌트로 구현하면서 어떤 부분에 신경을 써서 프로그래밍을 해야 하는지 알아보겠습니다! JSX 마크업 먼저 하나의 입력란과 제출 버튼으로 구성된 간단한 양식에 대한 마크업을 작성해보겠습니다. <form/> 부모 엘리먼트 아래에 <