JSON방식으로 데이터 교환
JSON.stringify()
자바스크립트 객체 → JSON 문자열 변환
undefined, function, Symbol은 지원이 안돼서 null로 들어감
스트링기파이 스트링화시킨다 문자열로 바꾼다
parse()
JSON 문자열 → 자바스크립트 객체 변환
서버에서 클라이언트로 줄 때 JSON형식으로 줌
네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용
JSON Placeholder
가짜서버(=페이크서버, 모킹서버) 테스트용
구글에 jsonplaceholder검색 - Guide탭 들어가기 - MyJson서버탭에서 내꺼 만들어볼 수도 있음
(App.js) App펑션 안에서 작성
useEffect를 사용해서 컴포넌트가 mount될 때
import "./App.css";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
console.log();
console.log("response.json()", response);
return response.json();
})
.then((json) => {
console.log("json", json);
setData([...json]);
});
}, []);
return (
<div>
{data.map((item) => {
return (
<div
style={{
border: "1px solid black",
margin: "3px",
}}
key={item.id}
>
<ul>
<li>userId : {item.userId}</li>
<li>id : {item.id}</li>
<li>title : {item.title}</li>
<li>body : {item.body}</li>
</ul>
</div>
);
})}
</div>
);
}
export default App;
'React' 카테고리의 다른 글
Redux Devtools (0) | 2023.07.06 |
---|---|
Redux Toolkit (0) | 2023.07.06 |
비동기 프로그래밍 (0) | 2023.06.21 |
React Router Dom (0) | 2023.06.21 |
Redux 리팩토링 - action creators, action values, Ducks 패턴 (0) | 2023.06.21 |