[React] 댓글 기능 구현

댓글 기능 구현하기 위한 states

  const [commentInput, setComment] = useState('');
  const onChange = event => {
    setComment(event.target.value);
  };
  const [userName] = useState('IamGroot');
  const [feedComments, setFeedComments] = useState([]);

• commentInput을 ('')로 useState 해 주면서 이를 이용해 input이 입력되면 게시 버튼이 활성화 되게 할 것이다.
• setComment(event.target.value)로 입력되는 input이 화면에 보이게끔 했다.
• userName은 사용자 정보를 받아오지 않고 'IamGroot'로 나오게끔 했다.
• feedComments는 댓글 리스트를 담으려고 만들었다

게시 버튼 클릭시 일어나는 이벤트 함수

  const post = e => {
    e.preventDefault();
    const copyFeedComments = [...feedComments];
    copyFeedComments.push(commentInput);
    setFeedComments(copyFeedComments);
    setComment('');
  };

• 전개연산자 (...) 를 통해 feedComments에 담겨있는 댓글을 copyFeedComments에 받아온다.
  (https://velog.io/@leeg/JS-React-%EC%A0%84%EA%B0%9C%EC%97%B0%EC%82%B0%EC%9E%90-)
• 입력된 댓글들을 기존 댓글 배열들이 담겨있는 copyFeedComments에 push한다.
• setFeedComments라는 변경함수를 통해 feedComments를 copyFeedComments로 변경한다.
• 게시가 완료된 댓글 입력착을 공백으로 만든다.

input과 게시버튼

<form class="comment-write">
   <input
    	name="commentInput"
		type="text"
		value={commentInput}
		placeholder="댓글 달기..."
		onChange={onChange}
	/>
	<button disabled={!commentInput} onClick={post}>
		게시
	</button>
</form>

• 댓글 창의 상태가 바뀔때마다 위에서 지정해준 onChange함수를 통해 comment의 값을 지속적으로 바꿔준다.
• disabled={!commentInput} 으로 commentInput이 위에서 지정해준 "" 공백이 아니게 되면 버튼이 활성화 되게 해준다.
• 게시 버튼을 누르게 되면 post함수가 발생하여 feedComments에 담겨서 re-rendering된 댓글창을 확인할 수 있음

입력된 댓글들이 저장되는 공간

 <div id="comments">
{feedComments.map((commentArr, i) => {
return (
	<CommentList
	userName={userName}
	userComment={commentArr}
	key={i}
 	/>
	);
	})}
</div>

• feedComments에 담겨있는 댓글값을 < CommentList >컴포넌트에 담아서 가져온다.
• < CommentList > 컴포넌트는 반복적으로 추가되는 사용자 댓글 하나하나를 담고 있는 박스이다.
• userName에는 위에서 입력한 이름, userComment에는 feedComments에 담겨있는 댓글 배열을 담는다.

반복적으로 들어갈 댓글 요소들을 컴포넌트화

  const CommentList = props => {
    return (
      <div className="useCommentBox">
        <p className="userName">{props.userName}</p>
        <div className="userComment">{props.userComment}</div>
        <p className="userHeart"> ♡</p>
      </div>
    );
  };

• feedComments.map 을 통해 CommentList 컴포넌트가 댓글 배열 수만큼 불려서 위 태그 모양대로 html에 생성됨
• props을 통해서 유저명, userComment에는 부모의 댓글 배열값을 받아서 feedComments에게 불려진다.