[React] 사용자 입력 처리하기

목표

다양한 사용자 입력 처리하기

• 한 줄 입력 처리하기
• 여러 줄 입력 처리하기
• 선택 박스 입력 처리하기
• 사용자 입력 데이터 핸들링하기

프로젝트 생성

$ npx create-react-app simplediary 

프로젝트 생성 후에 DiaryEditor.js 파일을 만들고 App.js에 import 하였습니다.
App.js

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

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

export default App;

DiaryEditor.js

const DiaryEditor = () => {
    return (
        <div></div>
    );
};

export default DiaryEditor;

이제 여기에 input 박스와 textArea를 넣어보도록 하겠습니다.

const DiaryEditor = () => {
    return (
        <div className="DiaryEditor">
            <h2>오늘의 먹방 일기</h2>
            <div>
                <input/>
            </div>
            <div>
                <textarea/>
            </div>
        </div>
    );
};

export default DiaryEditor;

잘 적용된 것을 확인할 수 있습니다. 저희는 input box, textArea에 값을 컨트롤 해야 합니다. 전에 게시물에서 사용했던 react에 useState를 사용해보도록 하겠습니다.

DiaryEditor.js

import { useState } from 'react'

const DiaryEditor = () => {

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

export default DiaryEditor;

잘 적용된 것을 확인할 수 있습니다. 이 코드를 변경해보도록 하겠습니다.

import { useState } from 'react'

const DiaryEditor = () => {

    const [state, setState] = useState({
        name: '',
        content: '',
    })

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

export default DiaryEditor;

useState를 하나만 사용하고, 스프레드 연산자를 사용하여 유지보수가 쉽게 변경하였습니다.
이제 이벤트 핸들러를 하나로 합쳐보도록 하겠습니다.

DiaryEditor.js

import { useState } from 'react'

const DiaryEditor = () => {

    const [state, setState] = useState({
        name: '',
        content: '',
    })

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

    return (
        <div className="DiaryEditor">
            <h2>오늘의 먹방 일기</h2>
            <div>
                <input name="name" value={state.name} onChange={handleChangeState}/>
            </div>
            <div>
                <textarea name="content"value={state.content} onChange={handleChangeState}/>
            </div>
        </div>
    );
};

export default DiaryEditor;

handleChangeState 함수를 만들고 태그의 name값을 가져와서 state를 설정을 해보았습니다.
다음은 select 태그를 만들고 react의 기능으로 선택된 값을 state에 저장해보도록 하겠습니다.

input 태그와 크게 다르지 않습니다.

DiaryEditor.js

import { useState } from 'react'

const DiaryEditor = () => {

    const [state, setState] = useState({
        name: '',
        content: '',
        hungry: 10,
    })

    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="name" value={state.name} onChange={handleChangeState}/>
            </div>
            <div>
                <textarea name="content"value={state.content} onChange={handleChangeState}/>
            </div>
            <div>
                배고픔 정도 :
                <select name='hungry' value={state.hungry
                } onChange={handleChangeState}> 
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={30}>30</option>
                    <option value={40}>40</option>
                    <option value={50}>50</option>
                    <option value={60}>60</option>
                    <option value={70}>70</option>
                    <option value={80}>80</option>
                    <option value={90}>90</option>
                    <option value={100}>100</option>
                </select>
            </div>
        </div>
    );
};

export default DiaryEditor;

저장 버튼을 추가하고 state를 출력해보도록 하겠습니다.

DiaryEditor.js

import { useState } from 'react'

const DiaryEditor = () => {

    const [state, setState] = useState({
        name: '',
        content: '',
        hungry: 10,
    })

    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="name" value={state.name} onChange={handleChangeState}/>
            </div>
            <div>
                내용 :
                <textarea name="content"value={state.content} onChange={handleChangeState}/>
            </div>
            <div>
                배고픔 정도 :
                <select name='hungry' value={state.hungry
                } onChange={handleChangeState}> 
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={30}>30</option>
                    <option value={40}>40</option>
                    <option value={50}>50</option>
                    <option value={60}>60</option>
                    <option value={70}>70</option>
                    <option value={80}>80</option>
                    <option value={90}>90</option>
                    <option value={100}>100</option>
                </select>
            </div>
            <div>
                <button onClick={handleSubmit}>일기 저장하기</button>
            </div>
        </div>
    );
};

export default DiaryEditor;

state가 원하는대로 잘 출력된 것을 확인할 수 있습니다.

간단한 css 작업을 하고 마무리 하겠습니다.

App.css

.DiaryEditor {
  border: 1px solid blueviolet;
  text-align: center;
  padding: 20px;
}

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

.DiaryEditor textarea {
  height: 150px;
}

.DiaryEditor select {
  width: 60px;
  padding: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
}

.DiaryEditor button {
  width: 500px;
  height: 50px;
  cursor: pointer;
  background-color: blueviolet;
}

css도 잘 적용된 것을 확인할 수 있습니다. 참고로 저는 chrome 자체가 다크모드이기 때문에 검정색이 베이스로 깔려있습니다.

---

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.