[React] 실습 / 사용자 입력 처리

한 줄 입력  처리

React 에서 state를 활용하여 input 태그의 value 값을 초기화 해주거나 변경 해 줄 수 있다.

import { useState } from "react";

const ReportEditor = () => {
  const [author, setAuthor] = useState("espania");	//author state 초기화

  return (
    <div className="ReportEditor">
      <h2>오늘의 보고</h2>
      <div>
      	작성자
        <input
          value={author}
          onChange={(e) => {
            setAuthor(e.target.value);	//setAuthor를 활용하여 author의 값을 변경
          }}
        />
      </div>
    </div>
  );
};

export default ReportEditor;​

input 태그의 value 값을 state(author)로 설정하게 되면 setState(setAuthor) 함수를 통해 state(author) 값을 바꾸지 않는 이상 input 태그의 value 값을 변경하지 못한다.

따라서, setState(setAuthor)를 onChange 의 콜백 함수에서 실행하여 input 태그의 값이 변경 될때마다 state(author)를 변경해주어야 한다.

 

여러 줄 입력 처리

React 에서 state를 활용하여 textarea 태그의 value 값을 초기화 해주거나 변경 해 줄 수 있다.

import { useState } from "react";

const ReportEditor = () => {
  const [content, setContent] = useState("본문 내용");
  return (
    <div className="ReportEditor">
      <h2>오늘의 보고</h2>
      <div>
        내용
        <textarea
          value={content}
          onchange={(e) => {
            setContent(e.target.value);
          }}
        />
      </div>
    </div>
  );
};

export default ReportEditor;

한 줄 입력 처리와 동일 하다.

 

state 공통 처리

한 줄 입력 처리와 여러 줄 입력 처리를 공통으로 처리하는 방법을 배워보자

다음과 같이 state 변수를 여러개 만들지 않고, 하나의 state 변수를 사용하여 처리한다.

import { useState } from "react";

const ReportEditor = () => {
  const [state, setState] = useState({
    author: "espania",
    content: "본문 내용"
  });
  return (
    <div className="ReportEditor">
      <h2>오늘의 보고</h2>
      <div>
        작성자
        <input
          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,
              author: state.author
            });
          }}
        />
      </div>
    </div>
  );
};

export default ReportEditor;​

이런식으로 정의를 하게되면 , onChange 함수가 호출될 때 마다 state 객체의 모든 속성들을 초기화 해줘야하는 단점이 있기 때문에 전개 연산자를 활용한다.

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

선택 박스 입력 처리

import { useState } from "react";

const ReportEditor = () => {
  const [state, setState] = useState({
    grade: 1
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  return (
    <div className="ReportEditor">
      <h2>오늘의 보고</h2>
      <div>
        평가
        <select name="grade" value={state.grade} 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 ReportEditor;