공부방

좋아요를 글 수 만큼 늘리기 본문

React

좋아요를 글 수 만큼 늘리기

코딩 화이팅 2024. 6. 15. 17:17
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

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

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>블로그</h4>
      </div>
      {
        글제목.map(function (a,i) {
          return (
          <div className='list'>
              <h4 onClick={() => { setModal(!modal); setTitle(i) }}>{글제목[i]} <span onClick={(e) => {
                e.stopPropagation();
                let copy = [...따봉];
                copy[i] = 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={() => {
        if (입력값.trim()==='') {
          alert("내용 입력!");
          return;
        }
        let copy = [...글제목];
        let 따봉copy = [...따봉];
        copy.unshift(입력값);
        따봉copy.unshift(0);
        글제목변경(copy);
        따봉변경(따봉copy);
      }}>글발행</button>

      {
        modal == true ? <Modal title={title}  글제목={글제목} 글제목변경={글제목변경} /> : null
      }

    </div>
  );
}

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

export default App;
<input onChange={(e) => { 입력값변경(e.target.value) }} /><button onClick={() => {
        if (입력값.trim()==='') {
          alert("내용 입력!");
          return;
        }
        let copy = [...글제목];
        let 따봉copy = [...따봉];
        copy.unshift(입력값);
        따봉copy.unshift(0);
        글제목변경(copy);
        따봉변경(따봉copy);
      }}>글발행</button>
  • 다른 것과 마찬가지로 array 형식의 state이기 때문에 복사본을 먼저 만든다.
  • 입력값을 unshift로 맨 앞에 뒀기 때문에 따봉 갯수도 이와 같이 맨 앞에 만든다.
  • 글제목변경 state 변경함수를 쓰면서 따봉 변경 state 변경함수도 같이 사용해준다.