[React] 사용자 입력 처리 import { useState }

사용자 입력

import { useState } from "react";

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

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

export default DiaryEditor;

... 연산자 사용 방법

import { useState } from "react";

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

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

export default DiaryEditor;

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

 

onChange 이벤트 한번에 사용하기

import { useState } from "react";

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

  const hadleChangeState = (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={hadleChangeState} />
      </div>
      <div>
        <textarea
          name="content"
          value={state.content}
          onChange={hadleChangeState}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

  const hadleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);
    setState({
     ...state,
      [e.target.name]: e.target.value,
    });
  };