다이어리 검색기 만들기(2) - 카테고리 표시하기

키워드를 선택할 수 있는 리스트를 만든다.

App.js

import React from 'react';
import Category from "./components/Category.js";
import './App.css';
 
function App() {
  const category = [
    {id: 1, title:"구성", sub:['연간', '월간', '주간', '일간']},
    {id: 2, title:"기간", sub:['1년+', '1년', '6개월', '3개월', '1개월']},
    {id: 3, title:"크기", sub:["A6-", "B6", "A5", "B5", "A4+"]},
    {id: 4, title:"커버", sub:["하드커버", "소프트커버", "PVC"]},
    {id: 5, title:"제본", sub:["양장", "6공", "스프링", "메모지"]},
    {id: 6, title:"기타", sub:["타임라인", "체크리스트", "밴드", "가름끈", "모눈", "월간-주간-월간-주간", "월간전체-주간전체"]},
  ];
  return (
    <div className="App">
      <Category data={category}></Category>
    </div>
  );
}
 
export default App;

최상위 App.js에서 category라는 array를 만들어 자료를 저장하고, 그 자료를 처리할 Category라는 Component를 생성한다. Category에 data={category} 형태로 props로 전달한다.

 

 

Category.js에서는 화면에 구현할 list를 만들어야 하는데 전달받은 props로 아래의 과정을 거쳐 만든다.

1. 먼저 sublist를 만들고

2. sublist를 넣은 list를 만든다.

 

1. sublists를 만든다

전달받은 category 는 id 1~6까지의 요소가 있으며, 그 안에 sub라는 항목이 존재한다.

while(i < props.data.length){
  const catData = props.data[i];
  // 서브 리스트 구성하기
  let j = 0;
  let subLists = [];
  while(j < catData.sub.length){
    subLists.push(
        <li key={i * 100 + j}>
          <input type="checkbox" id={catData.sub[j]}>
          </input>
          <label htmlFor={catData.sub[j]}>{catData.sub[j]}</label>
        </li>
    )
    j = j + 1;
  }

i번째 데이터를 catData에 저장한다. 

while문을 통해 그 안에 catData.sub를 하나씩 사용해 subLists를 만든다.

 

2. sublists를 넣은 list를 만든다.

// 리스트 구성하기
const lists = [];
let i = 0;
while(i < props.data.length){
  const catData = props.data[i];
  // 1. subLists를 만든다
  lists.push(
    <div key={i * 100} className="mainCategory">
      <h2 className="groupHeader">{catData.title}</h2>
      <ul className="subCategory">
        {subLists}
      </ul>
    </div>
  );
  i = i + 1;
}
 

Sublists의 li와 lists의 div 둘 다 key를 지정해주었다. key를 지정하지 않으면 react에서 자체적으로 오류메시지를 출력한다.

 

처음에는 li만 key를 지정해줘야 하는 줄 알았는데 오류메시지가 사라지지 않았다. push를 통해 list에 넣는 요소들에 key를 모두 지정해줘야 하는 것 같다.

 

Category.js의 전체 코드는 아래와 같다.

import React from 'react';
import './Category.css';
 
function Category(props) {
  // 리스트 구성하기
  const lists = [];
  let i = 0;
  while(i < props.data.length){
    const catData = props.data[i];
    // 서브 리스트 구성하기
    let j = 0;
    let subLists = [];
    while(j < catData.sub.length){
      subLists.push(
          <li key={i * 100 + j}>
            <input type="checkbox" id={catData.sub[j]}>
            </input>
            <label htmlFor={catData.sub[j]}>{catData.sub[j]}</label>
          </li>
      )
      j = j + 1;
    }
    lists.push(
      <div key={i * 100} className="mainCategory">
        <h2 className="groupHeader">{catData.title}</h2>
        <ul className="subCategory">
          {subLists}
        </ul>
      </div>
    );
    i = i + 1;
  }
  return (
    <div className="category">
      {lists}
    </div>
  );
}
 
export default Category;

출력된 화면

 

 

* 새롭게 알게 된 점

• push를 통해 리스트를 구성해 저장하는 경우, 태그(li, div)와 상관 없이 key를 지정해줘야 한다.
• push에는 하나의 최상위태그로 이뤄진 코드만 저장할 수 있다.