감정 일기장 만들기 (1) - React에서 사용자 입력 처리하기(useState)

한 입 크기로 잘라먹는 리액트의 강의에서 본격적인 프로젝트 수업이 시작됐다.

오늘 배울 것은 React에서 사용자의 입력을 어떤 방식과 코드를 사용하여 해결하는지에 대한 부분이다.

프론트엔드에서 가장 중요한 부분은 사용자의 입력을 처리하는 부분일 것이다.

그 중에서 오늘 배울 방법은 useState 훅을 사용하는 방법이다.

1. 먼저, 첫 번째 방법은 필요한 state들을 다 만들어서 useState 처리하는 방식이다.

import {useState} from 'react';

const DiaryEditor = () => {

	const [author, setAuthor] = useState('hi');
    const [content, setContent] = useState('content');
    
    return(
    	<div className="DiaryEditor">
        	<h2>오늘의 일기</h2>
            <div>
            	<input name="author" 
                value={author} 
                onChange={(e)=>{
                  console.log(e.target.value);
                  setAuthor(e.target.value)
                }
                />
             </div>
             <div>
            	<input name="content" 
                value={content} 
                onChange={(e)=>{
                  console.log(e.target.value);
                  setContent(e.target.value)
                }
                />
             </div>
          </div>
      );
 };
 export default DiaryEditor;
                

이 방법의 장점은 직관적으로 코드를 확인할 수 있다는 점이지만, 단점은 만약 처리해야 하는 state가 100개라면 코드의 길이가 지나치게 많아질 수 있다.
따라서 반복되는 코드를 줄일 방법을 생각해 볼 필요가 있다.

2. 두 번째 방법은

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>
            	<input name="content" 
                value={state.content} 
                onChange={(e)=>{
                	setState({
                    	...state,
                        content:e.target.value
                    });
                }
                />
             </div>
          </div>
      );
 };
 export default DiaryEditor;

useState를 state 형태로 하나만 만들고 state 객체 안에 author와 content 필드를 넣었다.

...state ( 스프레드 연산자 )를 사용하여 바꾸고 싶은 필드 외의 나머지를 표현해주고 바꾸고 싶은 필드는 e.tartget.value 형태로 나타내어 setState를 이용하여 변경해준다.
setState를 이용하면 편리한 점은 코드의 양을 줄여줌과 동시에 변경할 부분만 코드로 표현해줄 수 있다는 점이다.

3. 그리고 onChange함수에서 반복되는 부분도 함수 형태로 묶어준다.

import {useState} from 'react';

const DiaryEditor = () => {
    
    const [state, setState] = useState({
    	author: " ",
        content: " "
    });
    
    const handleChangeState = (e) => {
    	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>
            	<input name="content" 
                value={state.content} 
                onChange={handleChangeState}
                />
             </div>
          </div>
      );
 };
 export default DiaryEditor;

handleChangeState로 onChange함수에서 스프레드연산자와 변경하고 싶은 부분은 e.target.value로 설정하는 부분을 묶어주었다.

4. 추가적으로 감정 점수를 나타내는 부분도 추가하여 최종적인 코드는 다음과 같다.

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: " ",
    content: " ",
    emotion: 1,
  });
  const handleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

    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>
        오늘의 감정점수 :
        <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를 더해주어 다음과 같은 결과물을 만들 수 있다.