애를 많이 먹은 Mock Data 활용법...
Mock Data를 활용하면서 LifeCycle과 props의 개념을 전보다 정확히 머릿속에 파악 할 수 있었다.
fetch
함수가 익숙지 않은 분들은 .json
파일이 아닌 .js
파일로 데이터를 관리해주세요..json
파일로 변환 후 fetch
함수 적용해서 구현해주세요. constructor(props) {
super(props);
this.state = {
feedList: [],
};
}
feedList를 상태 값으로 둔다.
기존에 있는 값을 재활용 해도 상관없다.
//feed mockdata
componentDidMount() {
fetch('http://localhost:3000/data/unseoJang/feedData.json', {
method: 'GET',
})
.then(res => {
return res.json();
})
.then(res => {
this.setState({
feedList: res.data,
});
});
}
- mockData를 불러올때 componentDidMount()안에 fetch를 써준다.
- fetch에서 첫번째
.then
에서 값이 어떻게 불려 오는지 console.log()를 통해 확인할 수 있다.- 두번째
.then
에서는 state객체 값을 가져와 data값을 가져와준다.(이때 해맸던 것은res.data
값인데 .data는 배열의 값을 data로 가져왓을때 썻어야햇는데, 이부분을 캐치하지못하고 계속 해매고있었다.)
mockData를 다루는데 여러가지 형태가 있을 수 있다는 것을 깨달앗다.
.json 파일을 data로 감싸놓으면 res.data로 불러와야하고....목데이터를 실제 데이터로 돌리는 방법은 다음 블로깅에서 다룰 예정이다.
간단하게 해결될것 같은 부분들은 혼자 끙끙 앓지 말고 바로 누군가에게 물어보거나 하자