React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기

 

 

자, 리액트로 데이터를 이리저리 굴려보자.

원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 

 

스포일러

토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다.

1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다.

(여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.)

 

---

React(35) 리액트 훅 - map 으로  json 객체 데이터 가져오기

 

파일구조

먼저 파일구조를 살펴보자.

- component 폴더 안에 Day.js / DayList.js 파일을 추가하고

- db 폴더 안에 data.json 을 만들어준다. 

 

db/data.json

여기에는 json 객체를 넣어준다. 크게 나누어 days 와 words 라는 두 그룹이 들어있다.

{
  "days": [
    {"id": 1, "day": 1},
    {"id": 2, "day": 2},
    {"id": 3, "day": 3}
  ],
  "words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": false
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    ... 이하생략
    {
      "id": 12
      "day": "3",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
    }
  ]
}

 

App.js

Day 와 DayList 컴포넌트를 추가한다.

import DayList from "./component/DayList"; // 컴포넌트 두개를 추가
import Day from "./component/Day";

function App() {
  return (
    <div className="App">
      <DayList /> 			   // 컴포넌트 두개를 추가
      <Day />	  
    </div>
  );
} 
export default App;

 

component/DayList.js 

DayList 컴포넌트에서는 json 객체 데이터 중 days 라는 그룹 안의 데이터를 다룰 것이다.

map 함수를 이용하여 필요한 데이터만 뽑아 낸다. 

import dummy from "../db/data.json" // json 객체를 dummy 라는 변수에 넣어 임포트해준다.

export default function DayList() { 

  return (
    <ul className="list_day">
      {dummy.days.map((day) => (  // 맵함수를 이용해 dummy 안의 days 그룹 내의 원소를 검색한다.
        <li key={day.id}>	  // key 값을 days의 원소(day)의 id로 지정해주었다.
          Day {day.day}		  // 여기서 원소(day)속의 day 라는 키값의 데이터를 출력해준다.
        </li>
      ))}
    </ul>
  );
}

 

component/Day.js

Day 컴포넌트에서는 json 객체 데이터 중 words 라는 그룹 안의 데이터를 다룰 것이다.

여기서는 전체 데이터 중 특정 날짜의 영단어들만 출력할 것이다. 

1차로 filter 함수를 사용하여 특정 날짜의 데이터만 추려내고,

2차로 map 함수를 이용하여 그 데이터를 모두 화면에 보여줄 것이다.

import dummy from "../db/data.json";	 	// json 객체를 dummy 라는 변수에 넣어 임포트해준다.

export default function Day() {
  const day = 1					// 1 은 첫째 날을 의미한다.
  const wordList = dummy.words.filter(word => ( // filter()를 사용하여 wordList 라는 새 배열이 만들었다.
    word.day === day				// word 객체 속의 day 는 위에서 변수 day 의 값이 된다.
  ))
  
  return (
    <table>
      <tbody>
        {wordList.map((word) => ( 		// map 함수를 이용해 wordList 안의 원소를 검색한다.
          <tr key={word.id}>	  		// key 값을 wordList 원소(word)의 id로 지정해주었다.	  
            <td>{word.eng}</td>	  		// 여기서 원소(word) 안의 eng 데이터를 출력해준다.
            <td>{word.kor}</td>	  		// 여기서 원소(word) 안의 kor 데이터를 출력해준다.
          </tr>
        ))}
      </tbody>
    </table>
  );
}

 

실행화면

book 과 책이라는 단어를 통해 day1의 단어만 화면에 보여지는 것을 확인하였다.

 

---

MORE DETAILS 

여기서부터는 더 디테일한 설명을 정리한 섹션이다. 

 

 

왜 map() 함수를 사용할까?

전체에서 필요한 데이터를 뽑아내는데에는 여러가지 방법이 있다. 하지만 map() 함수가 가장 쉽고 간편하게 사용할 수 있다. 내가 본 코드들도 주로 map 혹은 filter 함수를 많이 사용하였다.

 

 

map() 함수가 궁금하시다면 아래 포스팅을 클릭해주세요 ↓↓↓

JavaScript - map 함수란 (feat. filter)

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists