React 기초 (목록 만들기) 01 - Concept

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다.

금융 IT에 종사하다 보니 Front-end 개발을 주로 하지만 Vue나 React 같은 Library 보다는 주로 jQuery 기반으로 개발을 하고 있습니다. 하지만 개발자는 끊임 없이 공부해야 하기에 React 기초를 공부하는 과정을 한 번 정리해 보겠습니다.

 

일단 간단하게 프로젝트를 생성하고 목록 정도만 개발해 볼 수 있도록 NAVER 뉴스 API, 도서 API에서 데이터를 수신해 화면에 목록 형태로 표시하도록 개발해 보겠습니다.

 

목록 구성

일단 NAVER API를 통해 받아온 뉴스 데이터와 도서 데이터는 아래와 같이 구성해 보겠습니다.

(데이터를 어느 정도 길이로 응답할지는 정확히 모르기 때문에 여러 줄로 표시해야 하는 부분은 여러 줄로 표시하도록 구성합니다.)

뉴스, 도서 목록 구성

탭 버튼 구성

목록을 두 가지 형태로 구성하므로 뉴스 데이터를 조회할 지, 도서 데이터를 조회할 지 사용자가 탭으로 선택할 수 있어야 합니다. 화면 하단에 간단하게 탭을 표시하여 선택할 수 있도록 구성합니다.

탭 버튼 구성

위 그림과 같이 간단하게 두 개의 탭을 표시하고 선택한 탭은 반전하여 선택되었음을 표시해 줍니다. 

 

검색 기능 구성

NAVER의 뉴스 및 도서 API는 "검색"을 위한 API 입니다. 사용자가 입력한 Keyword를 기준으로 데이터를 조회하므로 검색어를 입력하고 API를 호출하기 위한 컴포넌트가 필요합니다.

아래 그림과 같이 대강 구성해 보도록 하겠습니다.

검색 기능 구성

그림을 그리다 보니 그렇게 간단하지만은 않을 것 같습니다. 다음 포스트에서는 개발을 하기 위한 프로젝트 환경을 구성해 보도록 하겠습니다.