React 입문 #02 - Component 분할하기

포스트를 티스토리로 이전했습니다. 아래 링크로 접속해 주세요.

https://redballs.tistory.com/entry/React-%EA%B8%B0%EC%B4%88-%EB%AA%A9%EB%A1%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0-01-Concept?category=564726

--

만들려고 하는 화면을 간단하게 Component 단위로 한 번 쪼개어 보겠습니다.

Header

화면 최상단의 Header 영역입니다. Header Component는 처음에는 화면 제목을 표시하다가 사용자의 요청에 따라 아래와 같은 기능을 구현합니다.

1. 돋보기 버튼 선택 (최초)
   화면 제목이 표시된 상태에서 돋보기 버튼을 선택하면 화면 제목 영역을 검색어를 입력할 수 있는 입력 상자로 변경합니다.
2. 돋보기 버튼 선택 (검색어 입력 후)
   검색어를 입력한 후 돋보기 버튼을 선택하면 입력한 검색어로 뉴스, 도서, 영화 정보를 NAVER API로 검색합니다.
3. 검색 후 Header는 다시 "NAVER API 연계"라는 텍스트로 변경합니다.

돋보기 버튼 선택에 따라 Header는 아래와 같이 변화합니다.

1. 최초
   
2. 돋보기 버튼 선택 시
   
3. 검색어 입력
   
4. 검색 완료 (최초와 동일)
   

Tab Menu

Header 아래 위치한 검색 API 종류를 선택하는 영역입니다. TabList Component는 최초에는 뉴스를 "선택됨" 상태로 표시하고 각 Tab을 선택함에 따라 "선택됨" 영역을 변경합니다.

TabList는 접근성을 위해 <ul> 태그에는 role="tablist"를, 각 Tab 영역에는 role="tab" 속성을 부여하고 "선택됨" 상태와 동일하게 aria-selected 속성을 변경해 줍니다.

ListView

검색을 한 데이터를 목록 형태로 화면에 Bind 하는 영역입니다. ListView Component는 Header와 TabList의 검색 조건을 전달 받아 검색할 NAVER API를 선택하고 검색어를 전달하여 결과를 받아 화면에 Rendering 합니다.

검색 API를 뉴스, 도서, 영화 3가지를 사용하기로 했으므로 3개의 Layout을 각각 사용하기로 하겠습니다. Layout을 결정하기 위해서는 API에서 제공하는 데이터를 알아야 합니다. NAVER Open API에서 뉴스, 도서, 영화 Category 별로 제공하는 데이터는 아래와 같습니다.

1. 뉴스
   뉴스 API에서는 위와 같은 데이터를 제공합니다. ListView Component에서는 title(제목), pubDate(출판일), description(본문요약) 항목을 사용하여 Layout을 구성해 보겠습니다. 구성한 Layout은 아래와 같습니다.
   

2. 도서
   도서 API는 위와 같은 데이터를 제공합니다. ListView Component에서는 title(제목), author(저자), description(본문요약), image(도서 표지 이미지 URL) 항목을 사용하여 Layout을 구성해 보겠습니다. 구성한 Layout은 아래와 같습니다.
   

3. 영화
   영화 API는 위와 같은 데이터를 제공합니다. ListView Component에서는 director(감독), image(포스터 이미지 URL), title(제목) 항목을 사용하여 Layout을 구성해 보겠습니다. 구성한 Layout은 아래와 같습니다.