코드로 설명하도록 하겠습니다.

userState 에서 사용자 입력값 처리하기.

위와같이 처리하면 된다.

단, 중복된 부분(초록색 선)이 존재하게된다.

하나의 useState로 처리가 가능하다.

import { useState } from "react";

const DiaryEditor = () => {
  ***const [state, setState] = useState({
    author: "",
    content: "",
  });***

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={**state.author**}
          onChange={(e) => {
            ***setState({
              author: e.target.value,
              content: state.content,
            });***
            console.log("input:", e.target.value);
          }}
        />
      </div>

      <div>
        <textarea
          value={**state.content**}
          onChange={(e) => {
            ***setState({
              author: state.author,
              content: e.target.value,
            });***
            console.log("textArea:", e.target.value);
          }}
        ></textarea>
      </div>
    </div>
  );
};

export default DiaryEditor;

만약 useState 내에 객체가 여러개라면?

state.xxxx 로 자신의 값을 여러개 써주어야한다.

그렇기 하지 않으려면 스프레드를 이용하면 된다.(순서가 중요하다.)

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
  });

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={state.author}
          onChange={(e) => {
            setState({
              ***...state, // 순서가 중요 아래에 쓰면 안된다.***
              author: e.target.value,
            });
            console.log("input:", e.target.value);
          }}
        />
      </div>

      <div>
        <textarea
          value={state.content}
          onChange={(e) => {
            setState({
              ***...state, // 순서가 중요 아래에 쓰면 안된다.***
              content: e.target.value,
            });
            console.log("textArea:", e.target.value);
          }}
        ></textarea>
      </div>
    </div>
  );
};

export default DiaryEditor;

더 간단히 구현하면?

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
  });

  ***const handleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };***

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          name="author"
          value={state.author}
          ***onChange={handleChangeState}***
        />
      </div>

      <div>
        <textarea
          name="content"
          value={state.content}
          ***onChange={handleChangeState}***
        ></textarea>
      </div>
    </div>
  );
};

export default DiaryEditor;

마지막으로 다른것도 추가해본다.

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
    point: 4,
  });

  const handleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          name="author"
          value={state.author}
          onChange={handleChangeState}
        />
      </div>

      <div>
        <textarea
          name="content"
          value={state.content}
          onChange={handleChangeState}
        ></textarea>
      </div>

      <div>
        <select name="point" value={state.point} onChange={handleChangeState}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
    </div>
  );
};

export default DiaryEditor;