[React] Westagram 댓글 추가 함수

const [comment, setComment] = useState(‘’);

useState를 사용하기 위해 comment와 setComment를 담는다

const handleCommentInput = event => {
	setComment(event.target.value);
};



return(

<input className=“userComment” onChange={handleCommentInput} value={comment} />
<button type=“button” onClick={onSubmit}></button>

)


handleCommentInput을 통해 이벤트가 setComment에 저장되며 이 값은 useState에 담긴다

const [commentArray, setCommentArray] = useState([]);

const onSubmit = event => {
	event.preventDefault();
	if (comment === ‘ ’) {
		return
	}
	setCommentArray([…commentArray, comment]);
	setComment(‘’);
};

——————————————————————————

jsx 파일을 하나 더 만든 후 폴더에 map 함수가 작동할 조건을 만들어준다

import React from 'react';

const CommentList = ({ comment }) => {
  return (
    <li id="wecode">
      <span className="myName">Wecode_28기</span>
      <span>{comment}</span>
    </li>
  );
};

export default CommentList;

——————————————————————————

    <ul>
        {commentArray.map((comment, index) => (
         <CommentList key={index} comment={comment} />
         ))}
    </ul>

느낀 점

아직 자바스크립트에 대한 공부가 부족하여 React에서 댓글을 구현하기 위해 며칠간 함수를 만드는 방법 및 구현하는 조건 등 댓글 추가를 하기 위한 방법을 고민한 결과 고민과 searching을 하되 지나치게 고민하는 것보다 모르는 것을 물어보고 하나씩 차근차근 풀어나가는 것이 중요하다고 느꼈다. 또한 풀었다고 해서 끝내는 것이 아니라 복습하여 완벽히 이해하였는지, 내 것으로 만들었는지도 중요한 것을 느꼈다.