[React] map() 사용방법 & 버튼 추가 삭제 방법

⚡️댓글 삭제 버튼

const Main = () => {
  let [comment, setComment] = useState(""); 
  let [btn, setBtn] = useState([]);
  
  	// 댓글 삭제 버튼 만들기
  
  result (
  <div className="comment-list">
  {btn.map((item, index) => (
  	<div key={index}>
    	<span>yYy_Ds</span>
        <span key={index}>{item}</span>
    </div>
    <div className="comment-delete">
        <span 
        className="comment-list-delete"
        onClick = {() => {
            let copy = [...btn];
            copy.splice(index, 1)
            setBtn(copy)
        }}>삭제</span>
    </div>
  )

1. map((item, index) => (  )은 map()은 인자를 두개 까지 사용 할 수 있다
2. item은 button이라는 변수에서 값을 가져오고
3. index는 key 값이 별도로 없을 경우 index로 key값을 지정해준다
4. 삭제버튼을 만들 경우 index를 사용하여 삭제하고 싶은 댓글을 지정하여 삭제가 가능하다
5. onClick={() => {  } 함수를 사용하여 button을 클릭 했을 때 input의 value을 comment에 추가하는 버튼입니다.
6. btn state를 copy를 합니다.(array형태의 state 조작은 우선 copy해야 된다) 
7. copy 변수를 만들어 btn 값을 넣어주고
8. copy 한거에 splice 해주고 index번호의 값을 한개 삭제합니다.

 

⚡️댓글 추가 버튼

const Main = () => {
  let [comment, setComment] = useState(""); 
  let [btn, setBrn] = useState([]);

	// 댓글 추가 버튼 만들기

result (
<div className="comment-input-text">
    <input
      className="comment-input"
      type="text"
      placeholder="댓글 달기..."
      onChange={(e) => {
        setComment(e.target.value);
      } /> 
    <button
      className="comment-button"
      onClick={() => {
        let copy = [...btn];
        copy.unshift(comment);
        setBtn(copy);
      } >
     게시 
    </button>
  </div>

1. onClick={() => {  } 함수를 사용하여 button을 클릭 했을 때 input의 value을 comment에 추가하는 버튼입니다.
2. copy 한거에 unshift(입력값) 해서 array 맨 앞에 자료추가하는 합니다.
3. 그리고 state변경함수 사용했습니다.