[React - Study]

input 다루기 & button 삭제

전체 코드

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

function App() {
  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>ReactBlog</h4>
      </div>
            {
              글제목.map(function(a,i){
                return (
                <div className="list" key={i}>
                  <h4 onClick={()=>{setModal(!modal); setTitle(i)}}>{글제목[i]} 
                    <span onClick={(e)=>{
                    	e.stopPropagation();
                    	let copy=[...따봉]
                      	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);
            }}></input>
            <button onClick={()=>{
              let copy=[...글제목];
              copy.unshift(입력값);
              글제목변경(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>
            <button>글수정</button>
        </div>
      )
}


export default App;

input & button 코드

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

저번 공부시간에 input의 입력값을 받는 state(입력값) setState(입력값변경) 이 있었다. input은 e.target.value를 값이 입력되게 하고 button은 글제목의 배열값을 복사하여 사용하는데, copy 의 값을 unshift(입력값) 을 하면 따로 html 조작없이 만들 수 있다.

<button onClick={()=>{
                    let copy=[...글제목];
                    copy.splice(i, 1);
                    글제목변경(copy)
                  	}}>삭제
                  </button>

삭제기능 버튼 구현이다. 마찬가지로 삭제버튼의 글제목의 배열값을 복사하여 splice를 하는데 i 번째를 삭제하면 되므로 (i , 1) 을 사용하면 된다.