6-1. React에서 사용자 입력 처리 (useState with <input />)

만들어 볼 것

import { useState } from "react";

const DiaryEditor = () => {
    // author는 state, setAuthor는 상태변화를 주도하는 함수
    const [author, setAuthor] = useState("이정환");

    return (
        <div className="DiaryEditor">
            <h2>오늘의 일기</h2>
            <div>
                <input
                    name="author"
                    value={author}
                    // 값이 바뀌었을 때
                    onChange={(e) => {
                        console.log(e.target.value);
                        console.log(e.target.name);
                        setAuthor(e.target.value);
                    }}
                />
            </div>
        </div>
    );
};
export default DiaryEditor;

DiaryEditor.js

import './App.css';
import DiaryEditor from './DiaryEditor';

function App() {
  return (
    <div className="App">
      <DiaryEditor />
    </div>
  );
}

export default App;

app.js

 

아래와 같이 state를 설정할 수 있다.

import { useState } from "react";

const DiaryEditor = () => {
  // state는 state, setState는 상태변화를 주도하는 함수
  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, // 이게 앞으로 가면, ...state값이 덮어써서 안바뀌게 된다.
              });
          }}
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={(e) => {
              setState({
                ...state,
                content: e.target.value,
              });
          }}
        />
      </div>
    </div>
  );
};
export default DiaryEditor;

import { useState } from "react";

const DiaryEditor = () => {
  // state는 state, setState는 상태변화를 주도하는 함수
  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} 
        />
      </div>
    </div>
  );
};
export default DiaryEditor;

 

 

최종

App.js

import './App.css';
import DiaryEditor from './DiaryEditor';

function App() {
  return (
    <div className="App">
      <DiaryEditor />
    </div>
  );
}

export default App;

DiaryEditor.js

import { useState } from "react";

const DiaryEditor = () => {
  // state는 state, setState는 상태변화를 주도하는 함수
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });
    
  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    })
  }
  
  const handleSubmit = () => {
    console.log(state);
    alert("저장 성공");
  }
    
  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} 
        />
      </div>
      <div>
        <span>오늘의 감정점수 : </span>
        <select name="emotion" value={state.emotion} 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>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  );
};
export default DiaryEditor;

App.css

.DiaryEditor {
    boarder: 1px solid gray;
    text-align: center;
    padding: 20px;
}

.DiaryEditor input, textarea {
    margin-bottom: 20px;
    width: 500px;
    padding: 10px;
}

.DiaryEditor textarea {
    height: 150px;
}

.DiaryEditor select {
    width: 300px;
    padding: 10px;
    margin-bottom: 20px;
}

.DiaryEditor button {
    width: 500px;
    padding: 10px;
    cursor: pointer;
}