댓글 작성

조수진·2023년 6월 21일
const [comment, setComment] = useState('')  //e.target.value값
const [commentList, setCommentList] = useState([]) //추가될 곳

const handlerComment = () => {          
 setCommentList(PrevList =>[...prevList, comment]);
 setComment('');
}                                     //클릭할 때 실행되는 함수

const handleKeyDown = e => {
  if (e.key === 'Enter') {
    handlerComment();
   }       
  };
                                    //엔터누를 때 실행되는 함수
...

<input onChange={e => setComment(e.target.value)}
   onKeyDown={handleKeyDown} placeholder="댓글을 입력해주세요"
   value={comment} />
     
<button onClick={handlerComment}>등록</button>

...

{commentList.map((commentItem, index) => (
   <div key={index} title="user">
     <div>
       <div>조수진</div>
       <div title="small">찬성</div>
       <div title="time">3분전</div>
     </div>
     <div>{commentItem}</div>
   </div>
      ))}
profile
꾸준함의 힘을 믿는 프론트엔드 개발자

0개의 댓글