Project | 인스타그램 클론 코딩 리뷰 (2)

xedni·2020년 11월 13일
1

Project | Westagram

목록 보기
2/3
post-thumbnail

5. Code Review

2) Main Component 주요 코드

: 메인 페이지에는 상단의 네비게이션바, 인스타스토리, 피드, 추천목록 등이 존재한다.
const { profileList, feedList, loginName } = this.state; 아래 구조분해 할당이 된 코드를 보여줄 예정이므로 생략된 내용들에는 참고 바람.

(1) 스토리 정보

: 좌측 상단에 존재하는 친구 목록에 해당한다. 클릭했을때 스토리로 들어가지지는 않는다.
그럼에도 버튼으로 만든 이유는 클릭했을 때 정렬 순서를 바꾸기 위함인데 ~~아직 못만들었다.~~

//Main.js : 메인 컴포넌트의 렌더 내부의 자식컴포넌트인 'StoryList' 부분
  <button className='storyDataList'>
    {profileList
    .filter((ele) => ele.group === 'follow')
    .map((ele, index) => (
      <StoryList  // StoryList 컴포넌트
        list={ele} 
        index={{ index }} 
        onDelete={'수정중'}/>
    ))}
  </button>
  • profileList 라는 state에는 목업 데이터에서 받아온 계정들의 정보가 담겨있다.
  • 목업 데이터에서 팔로우로 구분된 계정들만 스토리에 보여주기 위해 filter 메서드를 이용하였다.
  • filter 된 계정이 담긴 배열객체들에 Map 메서드를 이용하여 라는 컴포넌트를 반복해서 만들어내었다

(2) 피드 정보

: 좌측 하단의 게시글 리스트이다.

//Main.js : 메인 컴포넌트의 렌더 내부의 자식컴포넌트인 'FeedList' 부분
{feedList
  .sort((ele1, ele2) => ele1.postTime - ele2.postTime)
  .map((ele) => (
    <FeedList
      feed={ele}
      profile={profileList.filter((ele) => ele.account === loginName)}/>
))}
  • feedList 라는 state에는 피드 정보가 담긴 목업 데이터의 정보가 담겨있다.
    (사실 계정 정보 목업 데이터에 넣고 싶었지만 시간관계상 분리시켰다, 때문에 계정 정보와 피드 정보는 따로놀게 되었다... 안타깝다)
  • 피드 정보는 작성 시간 순서에 따라 내림차순 하기 위해 sort 메서드를 사용했다.
  • 댓글 작성시 로그인한 계정 정보을 보내주기 위해 propfile 이라는 props로 전달해주고 있다.
  • 그 로그인 계정 정보인 loginName state는 아래와 같다.
  getAccountName = () => {
    this.setState({ loginName: this.props.history.location.state.name });
  };
  • loginName 이라는 state 는 이렇게 구성되어있다.(Login history 에서 넘겨준 정보일뿐이다)
  • 다음번엔 로컬스토리지로 계정 정보를 받아와서 만들어 보고싶다.

(3) 내 계정 정보

: 우측 상단의 계정 정보 부분이다.

//Main.js : 메인 컴포넌트의 렌더 내부의 자식컴포넌트인 'Myprofile' 부분
{profileList
  .filter((ele) => ele.account === loginName)
  .map((ele) => (
    <Myprofile profile={ele} />
))}
  • profileList state에서 로그인한 계정과 동일한 데이터 객체를 가져와서 Myprofile 컴포넌트로 전달해줍니다.
    그것을 위해 filter를 사용했다.
  • 사실 한개의 객체이므로 map을 사용하지 않아도 되지만 ~~라이프 사이클 에러나서 그냥 사용했다.~~

(4) 추천 친구 정보

: 우측 하단의 추천 친구 리스트 부분입니다.

//Main.js : 메인 컴포넌트의 렌더 내부의 자식컴포넌트인 'RecommendList' 부분
<RecommendList
  list={profileList.filter((ele) => ele.group === 'unfollow')}/>
  • profileList(목업 데이터에서 가져온 계정 정보가 담긴 state)의 group키가 follow로 구분된 친구들은 리스트에 나타났고 나머지 unFollow 그룹은 이곳에 보여지게 만들었다.
    filter를 사용했다.

to be continue.... 자식 컴포넌트리뷰는 여기서 계속

profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글