[input 속성 및 state 관리] 사용자 입력 처리하기

안녕하세요.

사용자 입력 처리하기 강의 관련 질문입니다.

input 태그를 통해 사용자 입력을 받고, 상태 관리하면, 상태에 사용자의 입력이 반영되는 게 한 단계씩 늦는 것 같습니다. (그 이유가 useState가 비동기적으로 처리된다고 들은적이 있는 것 같은데, 정확히 이해가 가지 않아서 질문드립니다.)

아래 코드의 handleOnChange함수에서,

Q1) e.target.name, e.target.value은 제깍제깍 실시간으로 반영이 되는데, input state는 한 단계 늦게 반영이 됩니다. 이런 현상이 발생하는 이유는 무엇이고, 이건 개발하는데 문제가 되지 않는 이유는 뭔지? 가 궁금합니다!

import { useState } from 'react';

const DiaryEditor = () => {
  const [input, setInput] = useState({
    author: '',
    content: '',
    emotion: 1,
  });

  const handleOnChange = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);
    setInput({ ...input, [e.target.name]: e.target.value });
    console.log(input);
  };

  const handleSubmit = () => {
    console.log(input);
    alert('오늘의 일기가 저장되었습니다!');
  };

  return (
    <div className='DiaryEditor'>
      <h2>오늘의 일기</h2>
      <div>
        <input name='author' value={input.author} onChange={handleOnChange} />
        <p>{input.author}</p>
      </div>
      <div>
        <textarea
          value={input.content}
          name='content'
          onChange={handleOnChange}
        />
        <p>{input.content}</p>
      </div>
      <div>
        <span>감정 지수 : </span>
        <select
          onChange={handleOnChange}
          name='emotion'
          value={input.emotion} 
        >
          <option value={1}>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>저장하기</button>
      </div>
    </div>
  );
};

export default DiaryEditor;

Q2) 위처럼 input이란 state는 한단계씩 늦게 반영이 되는데, select태그의 value 속성을 주는 목적은 무엇인가요??
인풋의 value 속성은 실시간으로 인풋의 값과 상태를 동기화해주는 목적으로 사용한다고 생각했는데,

state가 곧바로 변하지 않는거면, 이 인풋의 value 속성은 무용지물인 것 아닌가라는 생각이 들어 질문드립니다.

        <select
          onChange={handleOnChange}
          name='emotion'
          value={input.emotion} 
        >

Q3) useState의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?

  const handleOnChange = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);
    setInput({ ...input, [e.target.name]: e.target.value });
    console.log(input);
  };

const App() => {
    const [text, setText] = useState(); // text 초기값은 undefined
    return (
        <div>
            {text.toUpperCase()}
            // undefined is not object 에러 발생
        </div>
    );
}