[미니프로젝트] 객체를 배열로 바꾸는 방법

어제 구현 할 때는 피드 페이지에서 내가 쓴 게시물을 누를 경우 처리를 잘못해서 내가 쓴 모든 댓글이 보였었다.

const CommentList = (props) => {

  const myCommentInfo = useSelector((state) => state.post.comments);
  const check = myCommentInfo.commentId ? true : false
  const commentInfo = useSelector((state)=>state.feed.myPosts);

  if(check){ // 내 게시물 조회일 경우
    console.log("게시물게시물 조회")
    return (
      <React.Fragment> 
        {myCommentInfo.map((p) => {
          return <CommentItem key={p.commentId} {...p}></CommentItem>;
        })}
      </React.Fragment>
    );
  }else{ // 랜덤한 게시물 조회일 경우
    return (
      <React.Fragment> 
        {commentInfo.map((p) => {
          return <CommentItem key={p.commentId} {...p}></CommentItem>;
        })}
      </React.Fragment>
    );
  }
};

 

일어나서 생각 해보니 내가 작성한 댓글을 보여주는 게 아니라 각 게시물에 있는 댓글 정보를 띄워야 하기 때문에

1) post 모듈에 comments를 불러와서 comment에 넣었고,

2) Array.isArray(comment)를 해보니 false가 나왔다.

3) 객체를 배열로 바꿔주는 방법은 여러 개가 있는 데 Object.keys -> Object.values를 선택했다.

(이유는 코드 주석에 있다.)

const CommentList = (props) => {

  const comment = useSelector((state) => state.post.comments);
  const commentInfo = Object.values(comment)
  // post modules에서 가져온 정보가 {0:{}, 1:{}} 형태로 되어 있어서 map을 돌릴 수 없었다.
  // 처음에는 Object.key(comment)로 했었는 데 그럴 경우 {0,1,2,3...}이 되서
  // Object.value(comment)로 했더니 값들이 잘 들어갔다.

  return (
    <React.Fragment>
      {commentInfo.map((p) => {
        return <CommentItem key={p.commentId} {...p}></CommentItem>;
      })}
    </React.Fragment>
  );
};

회원마다 다르게 뜨는 걸 볼 수 있음

 

(참고한 사이트)

https://goddino.tistory.com/198

[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법