React11. input 다루기 2 : 블로그 글발행 기능 만들기

블로그 글 발행기능을 만들어보자(저장버튼 누를시 추가되게)
(서버+DB가 없으니 영구저장은 안되고)
글은 변수나 state에 저장

일단 글 적을 수 있는 UI 필요

<input onChange={()=>{}} />
<button onClick={()=>{}}></button>

Q.글발행기능만들기

• 사용자가 입력한 글 변수로 저장하기
  -실전) 서버로 먼저 보내서 영구저장하고..
• 저장버튼 누르면 그 변수를 어디에 추가함
  (입력한 글 state를 글제목 state에 추가)

state 데이터는 = 등호로 직접 수정하지마라
1. 글제목을 복사해서 arrayCopy라는 카피본을 하나 만들고,
2. 그걸 수정하고
3. 그걸 새로운 글제목state가 되도록 입력

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩 있는 곳
      <div className="publish">
        <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
        <button onClick={ ()=>{ 
          let arrayCopy = [...글제목];
          arrayCopy.unshift(입력값);
          글제목변경( arrayCopy );
         }}>저장</button>
      </div>
    </div>
  )
}

function App (){
 let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
 let [입력값, 입력값변경] = useState('');
 
 function 추가하기(para){
 	let arrayCopy = [...글제목];
   arrayCopy.unshift(para);
   글제목변경( arrayCopy );
 }
 
 return (
   <div>
     HTML 잔뜩 있는 곳
     <div className="publish">
       <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
       <button onClick={ ()=>{ 
         추가하기(입력값)
        }}>저장</button>
     </div>
   </div>
 )
}