Local Json

리액트에서 json을 어떻게 사용할까?

json이 로컬 파일일 경우, 흔히 map() 메서드를 사용합니다.

1. 로컬에 필요한 data.json을 준비합니다.

<json 랜덤 생성>
https://extendsclass.com/json-generator.html

위 사이트는 랜덤으로 json을 생성해줍니다. 저는 여기서 갖고와서 data.json을 만들었습니다.

2. 컴포넌트에 import

import Data from "./data.json"

3. map()메서드 활용하기

function App() {
  const [user, setUser] = useState([
    ...Data
  ]);
  
  return (
    <div className="App">
      <button onClick = {addUser}>추가</button>
      {user.map(post => (
        <div key = {post.random}>
          <h1>{post.firstname}</h1>
          <h2>{post.lastname}</h2>
          <h4>{post.date}</h4>
        </div>
      ))}
    </div>
  );
}

export default App;

user에 json을 저장했습니다. map메서드를 사용해서 firstname, lastname, date 값을 출력시켰습니다.

중요한 점은 key 속성을 부여하는 것입니다. 부여하지 않고 콘솔 창을 띄우면 경고를 보냅니다. key 속성은 고유한 값으로 해야함으로 json에서 id를 지정하는 것이 좋습니다.
인덱스는 변할 수 있기 때문에 지양합니다. key 속성은 map을 사용할 때 (json을 사용할 때 뿐만아니라) 필수적으로 부여한다고 생각하시면 됩니다.

간단한 local json은 map을 사용해도 크게 문제가 되지 않습니다.
그런데 서버로 부터 json을 받아와 수정하고 삭제한다면 어떨까요? map 메서드 같은 내장 메서드로는 힘들 것입니다. 그렇기에 리액트에서는 라이브러리를 사용해서 해결합니다.

Ajax

• ajax는 Js를 사용한 비동기 통신이고, 클라이언트와 서버간의 XML 데이터 주고받는 기술입니다.
• 전체 페이지를 리로드하지 않고 필요한 데이터만 리로드하기 때문에 많이 사용합니다. ajax를 구현하기 위한 방식이 몇 가지 라이브러리가 있습니다.

Axios vs Fetch

• Axios, Fetch는 서버로부터 데이터를 받는 대표적인 ajax 라이브러리입니다. 대표적인 특징은 다음과 같습니다.

1. axios
   구형 브라우저를 지원한다.
   응답 시간 초과를 설정하는 방법이 있다.
   JSON 데이터 자동변환이 가능하다.
   node.js에서의 사용이 가능하다.
   request aborting(요청 취소)가 가능하다.
   catch에 걸렸을 때, .then을 실행하지 않고, console창에 해당 에러 로그를 보여준다.
   return값은 Promise 객체 형태이다.

2. fetch
   JavaScript의 내장 라이브러리이기 때문에 import 하지 않고 사용할 수 있다.
   라이브러리의 업데이트에 따른 에러 방지가 가능하다.
   네트워크 에러가 발생했을 때 기다려야한다. (response timeout API 제공X)
   지원하지 않는 브라우저가 있다.
   return값은 Promise 객체 형태이다.

리액트에서는 axios를 많이 사용합니다. 구형브라우저를 지원하는 등 호환성에 장점이 있고 node.js에서도 사용합니다. 그리고 json 자동 형 변환도 큰 장점입니다.

Axios 사용법

axios는 REST api를 기반으로 합니다.

https://jsonplaceholder.typicode.com/users는

연습을 위한 json api입니다.

여기로부터 받아와서 화면에 출력시켜보겠습니다.

get request

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function App() {
 const [users, setUsers] = useState([]);
 
 const fetchUsers = async () => {
   
     const response = await axios.get(
       'https://jsonplaceholder.typicode.com/users'
     );
     setUsers(response.data);
 };

 useEffect(() => {
   fetchUsers();
 }, []);

 return (
   
   <ul>
     {users.map(user => (
       <li key={user.id}>
         {user.username}
       </li>
     ))}
   </ul>
 
 );
}
export default App;