사용이유는 간단하다.
//commentData.json
[
{
"id": 0,
"text": "리액트의 기초 알아보기",
"like": true
},
{
"id": 1,
"text": "westargram 만들기",
"like": true
},
{
"id": 2,
"text": "기능 구현 해보자...",
"like": false
}
]
public 폴더의 역할
- 웹을 배포한다는 것은 특정 폴더를 서버 컴퓨터에 올려두는 것을 의미
- CRA로 만든 프로젝트를 배포 했을 때, 실제 서버에 배포되는 폴더가 public폴더
- 따라엇 우리 서버 주소로 접근하면(개발서버의 경우 http://localhost:3000) public 폴더에 들어가는 것과 동일
http://localhost:3000/data/commentData.json
를 API 주소로 생각하고 http 요청을 통해서 API 요청을 보내고 응답을 받아보자//feed.js
import ...
const Feeds = ({ feeds }) => {
const [chats, setChats] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/data/commentData.json', {
method: 'GET',
})
.then(res => res.json())
.then(data => {
setChats(data);
});
}, []);
return(
...
)
export default Feeds;
이제 백엔드 API가 완성될 때 까지 기다리지 않고 mock data를 이용해서 백엔드 API를 모방해서 프론트엔드 개발을 진행할 수 있다...!