[React] - input 태그로 글 발행 기능 만들기

• 지난 시간에 정리했던 input 태그를 이용해서 블로그에 글을 발행하는 기능을 만들어보자.

❗️먼저 사용자가 input에 입력한 데이터를 담을 state를 생성해주어야 한다.

let [input, setInput] = useState('');
// input은 현재 상태의 값, setInput은 상태를 업로드하는 함수

이때 useState()의 괄호 안에는 해당 상태의 초기값이 들어가야 한다.
우리가 입력받을 input은 새로 발행할 글의 제목으로 문자열이기 때문에 초기값으로 빈 문자열을 준다.

// App.js

function App() {
  
  ...
  
 	 function addTitle(input) { // state 상태 변경
 		let newTitle = [...title] // 기존의 글들 복사해오기
   		newTitle.unshift(input); // input을 새 글 목록에 추가
  		setTitle(newTitle); // 완성된 글 목록을 인수로 state 변경함수 호출
	}
  
  
	let [input, setInput] = useState('');
  	
  	<div className = 'posting'>
    	<input onChange={ (e)=>{setInput(e.target.value)} }>  
        <button onClick={()=>addTitle(input)}>발행하기</button> 
    </div>
}