양방향 바인딩

const [ title, setTitle ] = useState();
const [content, setContent] = useState('');

<input className={style.postInput} value={title} onChange={(e) => {setTitle(e.target.value)}} ></input>
<textarea className={style.textareaInput} value={content} onChange={(e) => {setContent(e.target.value)}}></textarea>

1. onChange={() => {}}

   ⇒ input 값이 변하면

2. {setTitle(e.target.value)}

   ⇒ setTitle의 매개 변수가 input.value를 넘겨준다

3. setTitle이 실행되면 title의 값이 변한다. 그로 인해 리렌더링이 일어난다

4. value={title}

   ⇒ value에 title의 값이 들어간다

→ 계속 반복된다

변경된 state를 넣어줄 때

const postHandler = async() => {
    if(!title){
      alert('제목이 없습니다'); 
      return
    }
    if(!content) {
      alert('내용이 없습니다');
      return
    }
    try {
      const response = await axios.post('/board', {
        title: **title**, // 변경 된 title값을 넣어줌
        content: **content**
      })
      console.log(response.data.data.lastId);
      navigate(`/view/${response.data.data.lastId}`);
    } catch(err) {
      console.log(err);
    }
  }