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.... 자식 컴포넌트리뷰는 여기서 계속