react input usestate

리액트에서 input에 usestate를 적용하는 코드.
내가 input에 입력하는 값을 state에 저장하는 코드.

const[author,setAuthor]=useState("");
const[content,setContent]=useState("");

<input
          value={author}
          onChange={(e) => {
            setAuthor(e.target.value);
            console.log(author);
          }}
        />

e.target.value는 이벤트가 발생할 때 그 당시의 value값을 이벤트 객체에서 잡아오는 코드. 그것을 setAuthor에 넣어주면 author에 그 값이 들어가서 input에 author 값이 보여진다. setAuthor값을 input에 넣어주지 않으면 고정된 author 값만 보여져서 input에 입력하는 값이 안보인다.

응용

const [state, setState] = useState({
    author: "",
    content: "",
  });
  
<input
          value={state.author}
          onChange={(e) => {
            setState({
              author: e.target.value,
              content: state.content,
            });
          }}
        />
<textarea
          name=""
          id=""
          cols="30"
          rows="10"
          value={state.content}
          onChange={(e) => {
            setState({
              author: state.author,
              content: e.target.value,
            });
          }}></textarea>

state가 여러개면 요렇게 객체로 묶어서 전달 할 수도 있다. setState에서 author,content를 모두 전달해주는 이유는 state가 author,content 모두 가진 객체이기 때문에 setState 전달 할 때 새로운 객체를 만들어서 전달해줘야한다. 객체를 만들려면 새로운 객체를 만들어서 전달해야한다. 하지만 state에 요소가 여러 개 있다면 어떻게 하지?

onChange={(e) => {
            setState({
              ...state,
              author: e.target.value,
            });
          }}

이렇게 스프레드 연산자를 사용한다. 그러면 state를 깔끔하게 유지 및 보수가 가능하다. ...state가 순서 맨 앞으로 와야한다. 순서가 바뀌면 안된다. 원래 state를 스프레드로 펼친 후 내가 바꿀 값을 e.target.value를 가져오면 됨.