버튼 입력값 출력, 삭제 (input 다루기)

예시

오늘도 덩어리로 코드를 들고와서 미안하다 (미래의 나에게)

줄여서 보여줄 수 있을까 했는데 설명하다 보니까 하나하나가 다 필요하다 제웬장 글작성 시도 3번째 이번엔 성공한다 ㅂㄷㅂㄷ...

/*eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]);
  let [따봉, 따봉변경] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);
  let [입력값, 입력값변경] = useState("");

  return (
    <div className="App">
      <div>
        <h4>ReactBlog</h4>
      </div>

      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
                setTitle(i);
              }}
            >
              {글제목[i]}
              <span
                onClick={(e) => {
                  e.stopPropagation();
                  let copy = [...따봉];
                  copy[i] += 1;
                  따봉변경(copy);
                }}
              >
                😋
              </span>{" "}
              {따봉[i]}
            </h4>
            <p>2월 17일 발행</p>
            <button
              onClick={() => {
                let copy = [...글제목];
                copy.splice(i, 1);
                글제목변경(copy);
              }}
            >
              삭제하기
            </button>
          </div>
        );
      })}
      <input
        onChange={(e) => {
          입력값변경(e.target.value);
        }}
      />
      <button
        onClick={() => {
          let copy = [...글제목];
          copy.unshift(입력값);
          글제목변경(copy);
        }}
      >
        글발행
      </button>
      {modal == true ? (
        <Modal
          글제목={글제목}
          글제목변경={글제목변경}
          title={title}
          settitle={setTitle}
        />
      ) : null}
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal">
      <h4> {props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button>글수정</button>
    </div>
  );
}

export default App;

 

---

사실 오늘 설명할 것은 onChange로 돌린 이벤트를 버튼으로 출력하는 방법과 삭제 방법이다.

        onClick={() => {
          let copy = [...글제목];
          copy.unshift(입력값);
          글제목변경(copy);
        }}

이건 정말 간단하다 .

버튼에 onClick 이벤트를 발생시키고 map으로 돌린 개시물을 구성하고 있는 글제목 배열을 가져 오는데 스프레드 문법으로 깊은 복사를 해야지 전체가 복사된다. 

그리고 unshift 함수로 배열 맨 앞으로 입력값이 들어오도록 한다면 게시글이 최신순이 맨 앞에 나열된다.

위내용을 글제목변경 함수에 넣어주면 완성이다.

 

            <button
              onClick={() => {
                let copy = [...글제목];
                copy.splice(i, 1);
                글제목변경(copy);
              }}
            >
              삭제하기
            </button>

이번에는 삭제입니다!

버튼에 onClick 이벤트를 넣어주고 다시 map으로 돌린 글제목에 대한 값을 copy에 복사한 다음  splice으로 삭제를 진행시킨다.

splice(i, 1)  map으로 뽑은 i는 index 값 뒤에 1은 갯수이다.