[React] mock data instagram feed

Rookie·2022년 4월 20일
0
post-thumbnail

1. FeedData.json 파일 ( mock data를 담을 json파일 )
feed.js 파일 필요

FeedData.json -> 배열형태로 고유한 id값과 변경하고싶은 값 지정하고

[ 
  {
    "id":1,
    "userId": "username"
  }
[

변경하고 싶은 데이터의 위치를 지정해 ( ex. userid ) 태그안에 지정해준다.

<span>{feedInfo.userID}</span>

feedList.map ( list => {
  return (
    <FeedData
    key={list.id} />

2. 변경하고 싶은 html 태그를 js파일내 return 하단에 붙여준다.
붙여넣기 하면 분명 에러가 생길것!

1. 요소를 찾을 수 없는 경우

 <div className="feedCotainer">
          {feedList.map(list => {
            return (
              <FeedData
                key={list.id}
                feedInfo={list}
                commentList={commentList}
                commentArray={commentArray}
                onSubmitComment={onSubmitComment}
                comment={comment}
                handleReviewInput={handleReviewInput}
              />
            );
          })}
        </div>

2. import가 필요한 부분의 오류를 제거해준다.

내가 만든 컴포넌트들에서 에러가 발생할것이다.


부모요소에 추가했던 요소들을 자식파일로 불러와준다.

function FeedData({
  feedInfo,
  commentList,
  commentArray,
  onSubmitComment,
  comment,
  handleReviewInput,
})
  • ‼️주의해야할점‼️: 부모에서 받아준 데이터중 feedInfo={list}의 경우는 자식파일에서 절대 feedInfo 라고만 읽을 수 있다.
profile
노력형 잡캐입니다

0개의 댓글