[(과제) [React] Mock Data 활용법]

애를 많이 먹은 Mock Data 활용법...
Mock Data를 활용하면서 LifeCycle과 props의 개념을 전보다 정확히 머릿속에 파악 할 수 있었다.

Mission 1) mock data를 활용하여 여러 개의 댓글 구현

• 댓글 데이터를 파일로 분리해서 관리해주세요.
• 아직 fetch 함수가 익숙지 않은 분들은 .json 파일이 아닌 .js 파일로 데이터를 관리해주세요.
• 데이터가 기획에 맞게 UI 에 나타나면 과제 완료입니다.
• 로그인 실습 후에는 반드시 .json 파일로 변환 후 fetch 함수 적용해서 구현해주세요.

Mission 2) mock data를 활용하여 여러 개의 피드 구현

• mock data를 활용하여 데이터를 따로 분리해준 뒤 여러개의 피드를 구현해주세요.
  • Notion페이지에 있는 mock data 활용법을 참고해주세요.
  • mock data로 분리한 피드 데이터를 Array.map을 활용하여 구조를 표현해줄 수 있습니다.

  constructor(props) {
    super(props);
    this.state = {
      feedList: [],
    };
  }

1. state 활용

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,
        });
      });
  }

2. componentDidMount()함수와 fetch로 MockData 받아오기

• mockData를 불러올때 componentDidMount()안에 fetch를 써준다.
• fetch에서 첫번째 .then에서 값이 어떻게 불려 오는지 console.log()를 통해 확인할 수 있다.
• 두번째 .then에서는 state객체 값을 가져와 data값을 가져와준다.(이때 해맸던 것은 res.data값인데 .data는 배열의 값을 data로 가져왓을때 썻어야햇는데, 이부분을 캐치하지못하고 계속 해매고있었다.)

mockData를 다루는데 여러가지 형태가 있을 수 있다는 것을 깨달앗다.
.json 파일을 data로 감싸놓으면 res.data로 불러와야하고....목데이터를 실제 데이터로 돌리는 방법은 다음 블로깅에서 다룰 예정이다.
간단하게 해결될것 같은 부분들은 혼자 끙끙 앓지 말고 바로 누군가에게 물어보거나 하자