React map을 이용한 html 생성

참고 : 날짜 기본 값은 귀찮아서 넣지 않고, 새로 추가되는 부분만 들어가도록 해둠.

참고 : 클릭시 상위요소까지 같이 클릭이 될 경우,

onClick={(e)=>{e.stopPropagation(); 다른변경함수()}}

 

 

 

 

 

추가되는 길이만큼 요소가 추가되고, 추가되는 시간이 기록되도록 수정함. 

 

이건 추가버튼

      <input onChange={(e) => { 입력값변경(e.target.value) }}></input>
      
      <button onClick={() => {
      
        if (입력값.trim() === '') {
          alert('내용을 입력하세요');
          return; // 입력값이 없으면 경고창 출력 후 종료.
        }
        
        let temp = [...글제목]; // 글제목 추가
        temp.push(입력값);
        글제목변경(temp);
        
        let tempLike = [...또봉]; // 좋아요 추가
        tempLike.push(0);
        또봉변경(tempLike);
        
        let tempDate = [...날짜]; // 날짜추가
        let date = new Date();
        tempDate.push(date.toLocaleString());
        날짜추가(tempDate);

      }}>추가하기</button>

 

 

아래는 처음에 데이터 기반 자동 생성하는 부분

      {글제목.map((a, i) => {
        return (
          <>
            <div className="list">
              <h4>{a}  <span onClick={() => {
                let temp = [...또봉];
                temp[i] = 또봉[i] + 1;
                또봉변경(temp);
              }}>👍</span> {또봉[i]}</h4>
              <p>{날짜[i]} 발행</p>
              
              <button onClick={() => {

                let temp = [...글제목];  // 삭제시 제목 삭제
                temp.splice(i, 1);
                글제목변경(temp);
                
                let 임시또봉 = [...또봉]; // 삭제시 좋아요 삭제
                임시또봉.splice(i, 1);
                또봉변경(임시또봉);
                
                let 임시날짜 = [...날짜]; // 삭제시 날짜 삭제
                임시날짜.splice(i, 1);
                날짜추가(임시날짜);
              }}>삭제하기</button>
            </div>
          </>
        )
      })}

 

모달창

컴포넌트 생성 ( app() 밖에 생성)

function Modal(props) {
  return (
    <div className="modal-background" onClick={() => { props.setModal(false) }}>
                                            //배경을 누르면 모달창이 닫히게 하기 위해
                                            //props로 modal상태를 가져와서 변경함.
	<div className="modal"> 
        <h4>title</h4>
        <p>date</p>
        <p>content</p>
      </div>
    </div>
  )
}

        <button onClick={() => {
          setModal(true)
        }}>모달창보이기</button>
        
        
      {modal ? <Modal setModal={setModal} /> : null}

 

 

아래는 전체 코드

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

function App() {

  let [글제목, 글제목변경] = useState(['고라니 가디건 추천', '고양이 신발 추천', '비둘기 안경 추천']);
  let [modal, setModal] = useState(false);
  let [또봉, 또봉변경] = useState([0, 0, 0]);
  let [입력값, 입력값변경] = useState('hihi');
  let [날짜, 날짜추가] = useState(['1', '2', '3']);


  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <button onClick={() => {
          let tempArr = [...글제목];
          tempArr[0] = '다람쥐 가디건 추천';
          글제목변경(tempArr);
        }}>첫줄 다람쥐로 변경 </button>
        <button onClick={() => {
          let tempArr = [...글제목];
          tempArr.sort();
          글제목변경(tempArr);
        }}>정렬</button>
        <button onClick={() => {
          setModal(true)
        }}>모달창보이기</button>
      </div>

      <input onChange={(e) => { 입력값변경(e.target.value) }}></input>
      <button onClick={() => {
        if (입력값.trim() === '') {
          alert('내용을 입력하세요');
          return; // 입력값이 없으면 경고창 출력 후 종료.
        }
        let temp = [...글제목];
        temp.push(입력값);
        글제목변경(temp);
        let tempLike = [...또봉];
        tempLike.push(0);
        또봉변경(tempLike);
        let tempDate = [...날짜];
        let date = new Date();
        console.log(date.toLocaleTimeString());
        tempDate.push(date.toLocaleString());
        날짜추가(tempDate);

      }}>추가하기</button>



      {modal ? <Modal setModal={setModal} /> : null}



      {글제목.map((a, i) => {
        return (
          <>
            <div className="list">
              <h4>{a}  <span onClick={() => {
                let temp = [...또봉];
                temp[i] = 또봉[i] + 1;
                또봉변경(temp);
              }}>👍</span> {또봉[i]}</h4>
              <p>{날짜[i]} 발행</p>
              <button onClick={() => {

                let temp = [...글제목];
                temp.splice(i, 1);
                글제목변경(temp);
                let 임시또봉 = [...또봉];
                임시또봉.splice(i, 1);
                또봉변경(임시또봉);
                let 임시날짜 = [...날짜];
                임시날짜.splice(i, 1);
                날짜추가(임시날짜);
              }}>삭제하기</button>
            </div>
          </>
        )
      })}
    </div>
  )
}

function Modal(props) {
  return (
    <div className="modal-background" onClick={() => { props.setModal(false) }}>
      <div className="modal">

        <h4>title</h4>

        <p>date</p>
        <p>content</p>
      </div>
    </div>
  )
}
export default App;