[React] 사용자 입력 처리하기(feat.일기장)

이번 학습의 목표

◈ 사용자 입력 처리하기

일기장을 만들기 위해 DiaryEditor.js 파일을 생성해준다. 작성자와 내용을 입력하기 위해 각각  <input/>,<textarea/> 태그를 이용해 입력란을 만들어준다. 또한, 감정 점수를 선택하기 위해 <select/> 태그도 만들어주었다.

<input> 태그 = 한 줄만 입력할 수 있는 입력값
<textarea> 태그 = 여러 줄을 입력할 수 있는 입력값

입력된 값을 리액트에서 핸들링할 수 있도록 해야하는데, 이때 이전에 배운 State를 이용한다. State를 이용하기 위해 import {useState} from "react" 해주고 변수를 설정한다. 이때, 여러 변수를 한꺼번에 관리하기 위해 여러 변수를 묶어서 State를 만들어주었다.

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

현재 필요한 입력값은 작성자=author, 내용=content인데 여기에 내용을 입력하여 변화가 생기거나, 감정 점수를 선택하여 변화가 생기면 setState 해주기 위해 handleChangeState 함수를 만들어준다. 

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

여기서 ...state는 스프레드 연산자를 이용한 것이다. 이는 원래 있던 state를 펼쳐주고, 덧붙여서 변경하고자 하는 state의 프로퍼티를 마지막에 작성해줘야 한다. (순서 바뀌면 안 됨)

 

여기까지의 DiaryEditor.js의 return 속의 내용은 다음과 같다.

<div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </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>

마지막으로 저장하기 버튼을 만들어주었다.

<button onClick={handleSubmit}>일기 저장하기</button>

이때 버튼을 누르면 "저장 성공!"이라는 alert창을 띄워주기 위해 handleSubmit 함수를 만들어줬다.

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

DiaryEditor.js전체 코드는 다음과 같다.

import { useState } from "react";

const DiaryEditor = () => {
  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
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </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;

---

◈ CSS 스타일링 하는 방법

//App.css

.DiaryEditor {
  border: 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;
}