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

 

동적인 UI 만들어보기

모달을 만들었으니 이제 글을 클릭하면 모달창이 뜨게 만들고 싶다.

 

이게 기본 모습이고

 

여기서 글제목 : 병아리 간식 추천을 클릭하면 아래 모달창이 생기게 하고싶다.

 

그러면 onclick 메서드에 모달창이 뜨게 해주면 된다.

 

html 안에서 if 문은 작동하지 않기 때문에 조건식은 삼항 연산자를 이용하여 작성해준다.

 

전시간에 만든 

 

모달이 있기 때문에 가져다가 쓰고 싶으면 <Modal /> 이렇게 가져가서 사용하면 된다고 했었다.

 

그렇기 때문에 

 

useState 를 사용하여 modal 이라는 변수에 true를 할당해주고

 

 

modal 이 false 이면 모달창이 보이고 아니면 아무것도 뜨지 않게 만들어준다.

 

첫 상태는 true 인 상태이기 때문에 npm start로 실행하면 아무것도 뜨지 않는다.

 

하지만

 

글 제목 h4 태그안에 클릭시 modal을 usestate를 사용해 상태를 변경해준다고 하면 클릭할 때마다 모달창이 꺼졋다가 켜졋다가 하는 모습을 확인할 수 있다.

 

이상 오늘 수업 전체코드

App.js

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

function App() {
  let post = "쿠키도 배우는 코딩";
  let [a, b] = useState([
    "고양이 간식 추천",
    "강아지 간식 추천",
    "병아리 간식 추천",
  ]);

  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}
    </div>
  );
}

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

export default App;

App.css

.App {
  text-align: center;
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

div {
  box-sizing: border-box;
}
.list {
  text-align: left;
  padding-left: 20px;
  border-bottom: 1px solid grey;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

파일구조

 

이상이다!!!~~