map 반복문 안에선의 array 변경 (골머리 아픔)

 

필요 없는 부분은 최대한 다 지웠는데 기초부터 이해하려고 하다 보니까 코드가 상당히 길죠?

자~이제 map 함수에서 어.떻.게  아래 사진처럼 이모티콘을 누르면 좋아요를 따로 추가할 수 있는지 알아보도록 하죠

코드를 보자면 저희는 useState에서 [따봉, 따봉 변경], [글 제목, 글 제목 변경]으로 초깃값과 변경 값을 만들어 주었습니다.

 

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

  return (
      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(true);
              }}
            >
              {글제목[i]}
              <span
                onClick={() => {
                  let copy = [...따봉];
                  copy[i] += 1;
                  따봉변경(copy);
                }}
              >
                😋
              </span>{" "}
              {따봉[i]}
            </h4>

그리고 map을 돌려서 글제목에 대한 index값을 받은 걸로 copy라는 새로운 것을 만들고 거기 배열로 만든 따봉을 넣어두고

copy [i] +=1. 이것은 i번째에 해당하는 따봉에다가 1씩 추가하겠다는 것입니다.

이렇게 만든 copy를 따봉변경에다가 넣어주면 따봉의 값이 변합니다.

 

---

혹시나 전체 코드 궁금하신 분들은 아래 내용을 복사하시면 됩니다.

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

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

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

      {/* <div className="list">
        <h4>
          {글제목[0]}
          <span
            onClick={() => {
              따봉변경(따봉 + 1);
            }}
          >
            😋
          </span>{" "}
          {따봉}
        </h4>
        <p>2월 17일 발행</p>
      </div>

      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4
          onClick={() => {
            setModal(!modal);
          }}
        >
          {글제목[2]}
        </h4>
        <p>2월 17일 발행</p>
      </div>
      {modal == true ? <Modal /> : null} */}

      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(true);
              }}
            >
              {글제목[i]}
              <span
                onClick={() => {
                  let copy = [...따봉];
                  copy[i] += 1;
                  따봉변경(copy);
                }}
              >
                😋
              </span>{" "}
              {따봉[i]}
            </h4>
            <p>2월 17일 발행</p>
          </div>
        );
      })}
    </div>
  );
}

function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

export default App;