👋 시작하기 전에

이번 포스팅에서는 블로그 글 작성, 삭제 기능을 구현해 보려고 한다. 바로 시작해 보자!

🧀 기능 구현하기

App.js

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

function App() {

  let [글제목, 글제목변경] = useState(['오늘의 일기 📖', '내일의 일기 📘', '모레의 일기 📒']);
  let [좋아요, 좋아요변경] = useState(Array(글제목.length).fill(0));
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);
  let [입력값, 입력값변경] = useState('');

  return (
    <div className="App">
      <div className='blue-nav'>
        <h4>현의 블로그</h4>
      </div>

      {
        글제목.map((a, i)=>{
          return (
            <div className='list' key={i}>
              <h4 onClick={()=>{setModal(!modal); setTitle(i)}}>
                {글제목[i]}
                <span onClick={(e)=>{
                  e.stopPropagation();
                  let copy = [...좋아요];
                  copy[i] = copy[i] + 1;
                  좋아요변경(copy)
                  }}>💜</span>{좋아요[i]}
              </h4>
              <p>1월 9일 발행</p>
              <button className='btn' onClick={()=>{
                let copy = [...글제목];
                copy.splice(i,1);
                글제목변경(copy);
              }}>삭제</button>
            </div>
          )
        })
      }

      <input onChange={e=>{입력값변경(e.target.value)}}></input>
      <button onClick={()=>{
        let copy = [...글제목];
        copy.unshift(입력값);
        글제목변경(copy);
      }}>글 작성</button>

      {
        modal ? <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 태그 안에 글 제목을 작성 후 '글 작성' 버튼을 클릭하면

글 목록 상단에 방금 작성한 게시글이 추가된 것을 볼 수 있다. 또한 '삭제' 버튼 클릭 시 게시글이 삭제된다.

😎 끝내며

이렇게 글 작성과 삭제 기능을 간단히 구현해 보았다. input 태그에 입력한 값을 글 제목 배열에 추가하거나 삭제하기 위해 unshift()와 splice() 함수를 사용하였다.