개발/react

[react 기록용]1-13. input 입력 받아서 새로운 글 발행하기(다른 스테이트에 저장)

연별(YeonStar) 2021. 4. 1. 13:05
import React, {useState} from 'react';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '우동맛집 추천', '파이썬 독학']);
  let [입력값, 입력값변경] = useState('');
  
  function 글제목저장(){
    var newArray = [...글제목];
    newArray.push(입력값);
    글제목변경(newArray);
  }

  return (
    <div className="App">
      {
        글제목.map((글, i)=>{
          return (
            <div className="list" key={i}>
              <h3>{ 글 }</h3>
              <p>2월 17일 발행</p>
              <hr />
            </div>
          )
        })
      }

      <div className="publish">
        <input onChange={(e)=>{ 입력값변경(e.target.value) }}></input>
        <button onClick={()=>{ 글제목저장() }}>글저장</button>
      </div>      
    </div>
  );
}

export default App;