[React] 글 발행, 삭제 기능 추가하기

목표1: input박스에 쓴 글을 글발행 버튼을 눌렀을 때, 맨 위에 글이 추가되도록 하기

목표2: 각 글의 삭제 버튼을 누르면 해당 글이 삭제되도록 하기

 

html 코드를 조작하는 것이 아니라, state를 조작해야한다.

 

글 발행 기능

1. 인풋 박스와 글 발행 버튼 디자인하기 (글이 추가될때의 디자인은 이미 되어있기 때문에 따로 디자인 하지 않아도 된다.)

이렇게 인풋박스와 버튼을 디자인 하려한다

{
        title.map(function(a, i){
          return (
            <div className="list" key={i}>
        <h3 onClick={ () => { setModal(true); setIdx(i)} }> { title[i] } 
        <span onClick={ (e) => { e.stopPropagation(); add1Like(i) }}>👍</span> { like[i] } </h3> 
        <button onClick={ ()=> {removeTitle(i)} }>글삭제</button>
        <p> {postDate[i]} </p> 
      <hr/>
      </div>
          )
        })
      }
      <br></br>
      {//e는 이벤트를 뜻하고, 이 인풋박스의 값을 입력값이라는 state를 입력값변경을 통해 변경한다}
      <input onChange={ (e) => { 입력값변경(e.target.value); console.log(입력값)}} />
      <button onClick={ () => { addTitle(입력값) }}>글발행</button>

 

2. UI의 현재 상태를 state에 저장

// 입력값이라는 state를 생성한다. 기본값을 비어있는 문자열로 설정
let [입력값, 입력값변경] = useState('');

 

3. 클릭했을 때 글이 발행되도록 저장

(사실 응용 문제까지 풀어서 그에 관련된 코드도 있긴하다.)

function addTitle(txt) {
    if (txt == '') {
      alert("글 제목을 입력해주세요.")
    }
    else {
      setTitle([txt, ...title])
      setLike([0, ...like])
      const timeElapsed = new Date()
      const today = new Date(timeElapsed)
      setPostDate([today.toUTCString(), ...postDate])
    }
  }

 

글 삭제 기능

1. 삭제 버튼 디자인

리스트 반복 map함수 안에 글삭제 버튼을 생성한다.

 <button onClick={ ()=> {removeTitle(i)} }>글삭제</button>

 

2. UI의 현재 상태를 state에 저장

title을 조작하는 것이기 때문에 이미 작성되어 있는 state 활용

 

3. 삭제 버튼을 클릭했을 때, 해당 글 삭제

const removeTitle = (idx) => {
    setTitle(title => title.filter((_, i) => i !== idx));
  };

 

 

 

최종 UI 결과

 

 

전체 코드

/* eslint-disable */

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

function App() {

  let [idx, setIdx] = useState(0);
  let [title, setTitle] = useState([
    '남자 코트 추천',
    'FC서울 직관 후기',
    '바버 레인부츠 후기, 추천!!']);
  let [like, setLike] = useState([0, 0, 0]);
  let [입력값, 입력값변경] = useState('');
  let [postDate, setPostDate] = useState([
    'Thu, 20 Jul 2023 03:15:45 GMT',
    'Thu, 20 Jul 2023 03:15:45 GMT',
    'Thu, 20 Jul 2023 03:15:45 GMT'
  ]);
  
  function add1Like(idx) {
    let copyLike = [...like]
    copyLike[idx] += 1
    setLike(copyLike)
  }

  function changeTitle() {
    let copyTitle = [...title]
    copyTitle[0] = '여자 코트 추천'
    setTitle(copyTitle)
  }

  function addTitle(txt) {
    if (txt == '') {
      alert("글 제목을 입력해주세요.")
    }
    else {
      setTitle([txt, ...title])
      setLike([0, ...like])
      const timeElapsed = new Date()
      const today = new Date(timeElapsed)
      setPostDate([today.toUTCString(), ...postDate])
    }
  }

  const removeTitle = (idx) => {
    setTitle(title => title.filter((_, i) => i !== idx));
  };

  let [modal, setModal] = useState(false); //현재 상태는 false -> 닫힌상태

  return (
    <div className="App">
      <div className="black-nav">
        <div>Jonny&Jayne Blog 🥰</div>
      </div>
      {
        title.map(function(a, i){
          return (
            <div className="list" key={i}>
        <h3 onClick={ () => { setModal(true); setIdx(i)} }> { title[i] } 
        <span onClick={ (e) => { e.stopPropagation(); add1Like(i) }}>👍</span> { like[i] } </h3> 
        <button onClick={ ()=> {removeTitle(i)} }>글삭제</button>
        <p> {postDate[i]} </p> 
      <hr/>
      </div>
          )
        })
      }
      <br></br>
      <input onChange={ (e) => { 입력값변경(e.target.value); console.log(입력값)}} />
      <button onClick={ () => { addTitle(입력값) }}>글발행</button>
      
    {
        modal == true ? <Modal idx={idx} title={title} changeTitle={changeTitle} 
        setModal={setModal}/> : null
      }
      
    </div>
  );
}

function Modal(props) { 
  return (
      <div className='modal'>
          <h2>{ props.title[props.idx] }</h2>
          
          <p>날짜</p>
          <p>상세내용</p>
          <button onClick={ ()=> {props.changeTitle()} }>글수정</button>
          <button onClick={ ()=> {props.setModal(false)}}>닫기</button>
        </div>
    
  )
}

export default App;

 

---

 

차근차근 개발해 나가는데 재미를 찾고 있다.

비록 친절한 개발자 글은 아니겠지만, 공부용으로 조금씩 써보는것에 의미를 두고자 한다.