리액트 기초(하나하나 따라해보기) 9편

이러한 창에서 하나하나 클릭시 거기에 맞는 글제목을 띄우는 기능을 추가하겠다.

 

그렇게 하기 위해서는 클릭시 몇번째 인자인지 props로 내려주는 작업이 필요하다.

 

몇번째 인자인지 담기 위해 자바로 치면 int 변수가 하나 필요하다. 이걸 state를 이용하여 이렇게 하나 만들어준다.

 

이제 이 타이틀을 제목을 클릭시 각 제목이 몇번쨰 인자인지 알아내여 변경해준다.

 

setTitle(i)를 통해 각 인자에 해당하는 반복되는 메뉴를 누르면 그 숫자로 title 변수가 바뀌고 이 title변수를 props 로내려준다.

 

그리고 이제 내려준 title 변수를 

 

모달에서 이렇게 사용하면 이제 각각에 대응하는 모달창이 열린다.

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "쿠키도 배우는 코딩";
  let [a, b] = useState([
    "고양이 간식 추천",
    "강아지 간식 추천",
    "병아리 간식 추천",
  ]);
  let [반복, 반복함수] = useState([
    "고양이 캣타워",
    "고양이 장난감",
    "고양이 친구들",
  ]);
  let [title, setTitle] = useState(0);

  let [modal, setModal] = useState(true);

  let [good, goodPlus] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <h2 style={{ color: "gray", fontSize: "40px" }}>블로그입니당</h2>
      </div>

      <button
        onClick={() => {
          let copy = [...a];
          copy[0] = "기러기 간식 추천";
          b(copy);
        }}
      >
        글수정
      </button>
      <div className="list">
        <h4>
          글 제목 : {a[0]}
          <span
            onClick={() => {
              goodPlus(good + 1);
            }}
          >
            🌻
          </span>
          <span
            onClick={() => {
              goodPlus(good - 1);
            }}
          >
            ❌
          </span>
          {good}
        </h4>
        <p>9월 20일 발행</p>
      </div>
      <div className="list">
        <h4>글 제목 : {a[1]}</h4>
        <p>9월 20일 발행</p>
      </div>
      <div className="list">
        <h4
          onClick={() => {
            setModal(!modal);
          }}
        >
          글 제목 : {a[2]}
        </h4>
        <p>9월 20일 발행</p>
      </div>

      {/* {modal == false ? <Modal /> : null} */}

      {반복.map(function (a, i) {
        return (
          <div className="list">
            <h4
              onClick={() => {
                setModal(!modal);
                setTitle(i);
              }}
            >
              {반복[i]}
            </h4>
            <p>8월 18 일 발행</p>
          </div>
        );
      })}
      {modal == false ? (
        <Modal
          글제목={반복}
          글제목함수={반복함수}
          color={"green"}
          title={title}
        />
      ) : null}
    </div>
  );
}

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

export default App;