728x90
반응형
1. JSON이란?
▶ JS 객체 문법 기반으로 만든 데이터 교환 형식
▶ 큰 따옴표(")만 허용
▶ 메서드 : JSON - 문자열 형태 - 서버/클라이언트 간 데이터 전송시 사용 (★파싱 필요 ★ )
(1) JS -> JSON 형태
* JSON.stringify({js객체}) : JSON 문자열로 변환
JSON.stringify( {x:5, y:6} ) ; // "{"x":5,"y":6}"
(2) JSON -> JS 형태
* JSON.parse(json형식) : 자바스크립트 객체 변환 ( ★ 네트워크 통신의 결과 ★)
2. {JSON} Placeholder = fake API (가짜 서버)
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.
jsonplaceholder.typicode.com
▶ guide 클릭 : 여기서 서버역할을 할테니, 테스트해봐!
import './App.css';
import { useEffect, useState } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
.then((response) => response.json())
.then((json) => {
return setData([...json]);
console.log(json);
});
}, []);
return (
<div>
<h3>JSONPlaceholder DATA</h3>
{data.map(function (item) {
return (
<div key={item.id} style={{ border: '1px solid black', margin: '5px' }}>
<ui>
<li>{item.userId}</li>
<li>{item.id}</li>
<li>{item.title}</li>
<li>{item.body}</li>
</ui>
</div>
);
})}
</div>
);
}
export default App;
▶ useEffect(): 새로고침 될 때 발생 + fetch로 데이터 넣어주기 + setData([...json])으로 하여 랜더링
▶가져온 data는 배열 + map 함수로 가져온 데이터 그려주기
끝.
반응형