[7주차] 리액트: 로컬파일 dummyData(json) 가져오기

 

리액트환경 로컬파일 dummyData (json)가져오기

리액트 환경에서 json 데이터를 가져오는 루트는 두 가지다

1. 외부 API 를 통해 받는 json 데이터

2. 로컬안에 있는 파일을 통해 받는 json 데이터

 

오늘은 그 중, 두 번째에 해당하는 로컬파일 json 데이터를 가져오는 방법을 기록해본다.

 

---

(1) 파일구조

src 안에 database 라는 폴더를 만들고, fakeData.json 파일을 생성한다.

src > database > fakeData.json

 

 

(2) json 파일

json 파일 안쪽에서 dummy data로 쓰일, 객체요소로 이루어진 배열을 넣어줬다.

유의할 사항: json 파일에서는 key 의 이름을 "" 로 감싸줘야 한다.

 

//fakeData.json

[
  {"id": 1, "userName": "Hamin", "createdAt": "23-11-15 10:55", "message":"I love you Paul!", "wroteTo": "Paul" }
  ,
  {"id": 2, "userName": "Rose", "createdAt": "23-11-15 10:55", "message":"I like you Paul!", "wroteTo": "Paul" }
  ,
  {"id": 3, "userName": "Guigui", "createdAt": "23-11-15 10:55", "message":"I love you Elio!", "wroteTo": "Elio" }
  ,
  {"id": 4, "userName": "Tom", "createdAt": "23-11-15 10:55", "message":"I like you Elio!", "wroteTo": "Elio" }
  ,
  {"id": 5, "userName": "Mark", "createdAt": "23-11-15 10:55", "message":"I love you Gatsby!", "wroteTo": "Gatsby" }
  ,
  {"id": 6, "userName": "Sandra", "createdAt": "23-11-15 10:55", "message":"I like you Gatsby!", "wroteTo": "Gatsby" }
  ,
  {"id": 7, "userName": "Yuri", "createdAt": "23-11-15 10:55", "message":"I love you Lee!", "wroteTo": "Lee" }
  ,
  {"id": 8, "userName": "Vik", "createdAt": "23-11-15 10:55", "message":"I like you Lee!", "wroteTo": "Lee" }
]

 

 

 

 

(3) json 파일 불러오기

내가 시도했던 방법 두 가지

1. json 데이터 바로 가져오기

 

데이터를 가져오고 싶은 jsx 파일 상단에 import 하기

import { useState } from 'react';
import fakeData from "../database/fakeData.json";

 

그런 다음, 구조분해할당으로 useState를 정의해놓았던 선언문의 초기값에 바로 넣기

 const [letters, setLetters] = useState(fakeData);

import { useState } from 'react';
import fakeData from "../database/fakeData.json";

function Home () {
	const [letters, Setletters] = useState(fakeData);
}

 

 

 

2. useEffect 를 사용해, 랜더링 시 최초 1회만 json 데이터를 가져올 수 있도록 하기

(랜더링 회수 줄이기위해 => 효율 up)

import { useState } from 'react';
import { useEffect } from 'react';
// 여기서 import로 데이터 가져오지 않고 require 을 통해 데이터 가져옴

function Home () {
	const [letters, Setletters] = useState([]);
    useEffect(() => {
    	const lettersData = require("../database/fakeData.json");
        setLetters(lettersData);
    , []}
}

 

---

 

참고자료

React에서 로컬 JSON 파일을 불러오는 방법

[React] 게임으로 배우는 리액트 - import와 require 비교