1차 프로젝트 카카오프렌즈샵 피드 관련 내용

현재 피드에서 백앤드 한테 받아올 데이터들을 정리해봤다.

1.profile_picture
2.username
3.datetime
4.like_count
5.title
6.content
7.reply_count
8.reply_username
9.reply
10.image_url
11.recommend_products

11개의 데이터가 나오는데 목데이터를 활용해서 먼저 피드에 적용을 해보았다.

[
    {
        "id": 1,
        "profile_picture": "https://t1.kakaocdn.net/friends/prod/main_tab/feed/npc_20210303144557.png",
        "username": "죠르디",
        "datetime": "2021.03.19",
        "like_count": 165,
        "title": "나만의 멋진 사원증 언젠간 꼭 걸고 말꺼죨",
        "content": "(웅성웅성) 3월 19일 죠르디 사원증이 출시된다구!",
        "reply_count": 100,
        "reply_username": "tjdgns503",
        "reply": "아하하",
        "image_url": ["https://t1.kakaocdn.net/friends/prod/main_tab/feed/media/media_0_20210317160433.jpg","https://t1.kakaocdn.net/friends/prod/main_tab/feed/media/media_1_20210317160433.jpg","https://t1.kakaocdn.net/friends/prod/main_tab/feed/media/media_2_20210317160433.jpg","https://t1.kakaocdn.net/friends/prod/main_tab/feed/media/media_6_20210317160434.jpg"],
        "recommend_products": [
            {
                "name": "왕록님라이언",
                "price": "300000.00",
                "image_url": "https://t1.daumcdn.net/friends/prod/product/20210308161640247_8809721507544_AW_00.jpg"
            },            {
                "name": "왕록님라이언",
                "price": "300000.00",
                "image_url": "https://t1.daumcdn.net/friends/prod/product/20210308161640247_8809721507544_AW_00.jpg"
            }
        ]
    },

그다음 MainPageFeed 컴포넌트에 state 값으로 feedList 라는 빈 배열을 만들어 놓고

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

componentDidMount 로 fetch 함수를 써서 feedList에 저장

 componentDidMount(){
   fetch('http://localhost:3000/data/data.json', {
     method: 'GET'
   })
   .then(res => res.json())
   .then(data => this.setState({
     feedList: data,
   }))

 }

feetList 에서 받아온 데이터를 map 함수를 쓴 다음 FeedList 컴포넌트로 전달함(react 라이프사이클이 constructor -> render -> componentDidMount -> render 로 전달 되므로 처음 this.state.feedList 값은 빈 배열 일수 밖에 없다. 그래서 feedList 길이가 1 이상일때 map 함수를 쓰게끔 조건문을 걸어주었다. 다른 방법도 있을것 같지만 현재는 이방법으로 조건문을 걸어놓았다.)

   return (
      <>
      {this.state.feedList.length > 0 && <>
        {this.state.feedList.map(list => {
          return (
            <FeedList
              key={list.id}
              profile_picture={list.profile_picture}
              username={list.username}
              datetime={list.datetime}
              like_count={list.like_count}
              title={list.title}
              content={list.content}
              reply_count={list.reply_count}
              reply_username={list.reply_username}
              reply={list.reply}
              image_url={list.image_url}
              recommend_products={list.recommend_products}
            />
          )
        })}
      </>
      }
      </>
    );

이번 장은 MainPageFeed 컴포넌트에서 FeedList 컴포넌트에 데이터 전달 형식을 적어보았다. 다음장은 FeedList 컴포넌트에서 어떤 형식으로 데이터를 받아 화면에 보여주는지를 적어야겠다.