댓글 컴포넌트화해 분리하고 props로 데이터 전달하기

새로 만들어진 댓글을 컴포넌트화 해서 새 파일로 빼고

관련된 내용을 부모에서 자식으로 데이터를 전달해보도록하겠다.

---

이미 만들어진 기능을 다시 컴포넌트로 분리하라니...머리가 아파왔다.

기존의 코드는 이렇게 생겼고 반복될 부분만 컴포넌트화 해주기로 했다.

여기서 반복되는 부분은 return 중 p 태그다.

<div id="newComment">
 {saveComment.map((ele, idx) => {
 return <p key={idx}>wecode {ele}</p>;
 })}
</div>

반복되는 p 태그를 빼고 만들어준 CommentFull 컴포넌트에 건내줄 userComment의 요소와 index 값을 props로 넘겨준다.

  return (
              <div id="newComment">
                {saveComment.map((ele, idx) => {
                  return <CommentFull userComment={ele} key={idx} />;
                })}
              </div>
           )

아까 뺐던 반복되는 p 태그를 CommentFull 컴포넌트에 넣어주고

인자로는 props를 넣고  userComment를 참조해준다.

  const CommentFull = props => {
    return <p className="userComment">wecode {props.userComment}</p>;
  };

 

 

너무 간단한 코드들이라 컴포넌트로 빼낼 필요가 없었지만 연습 겸해보라고 하셔서 해보았다.

아래는 전체 코드이고 CommentFull 컴포넌트는 새 파일로 만들어서 넣어주었다.

  const CommentFull = props => {
    return <p className="userComment">wecode {props.userComment}</p>;
  };

  return (
              <div id="newComment">
                {saveComment.map((ele, idx) => {
                  return <CommentFull userComment={ele} key={idx} />;
                })}
              </div>
           )