[React] 사용자 입력 처리하기 - simpleDiary 프로젝트 1

summer_joy·2023년 4월 25일

토이프로젝트

목록 보기

3/3

1. 리액트 프로젝트 생성

npx create-react-app simplediary

사용하지 않을 로고 파일, 테스트 파일들을 지우고 App.js 임포트 정리까지 해줬다.

2. 오늘의 학습목표

3. diaryEditor 컴포넌트 생성

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

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

export default App;

4. 한 줄 짜리 입력 받기

사용자 입력값을 받을 수 있는 input값을 생성해주었다.

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

export default DiaryEditor;

5. 리액트의 useState import 하기

이제 이 값을 DiaryEditor 컴포넌트가 핸들링 할 수 있도록 state를 사용한다.

import { useState } from "react";

useState를 import 해준다.

작성자를 저장할 것이기 때문에

const [author, setAuthor] = useState("");

useState기본값을 주고 author라는 state와 author 상태변화를 주도할 setAuthor 상태변화함수를 만들어주었다.
여기서 첫번째 값은 현재 상태, 두번째 값은 Setter함수이다

input의 입력값이 바뀌면 입력값이 바뀔때마다 setAuthor 상태변화함수를 이용하여 author에 저장하려고 한다.

input의 값을 author로 설정해준 후 input이 수정되면 author의 값을 실시간으로 바꿔줄 수 있는 이벤트를 추가한다.

6. onChange

onChange props에 이벤트 객체 e를 매개변수로 사용하는 콜백함수를 전달해준다.

<input value={author} 
       onChange={(e)=>{
       console.log(e);
       }}/>

오늘의 일기 input에 값을 입력하면 console창에 change 이벤트 객체가 찍히는 것을 확인할 수 있다.
어떤 값을 입력했는지 확인하려면 타겟의 value 값을 적은 후 저장
console창을 확인해보면 input에 넣으려 하는 값이 뜬다.

7. 여러 줄 입력받기, onChange 이벤트를 사용하여 값 전달하기

위에서 설명했던 input과 textarea는 state를 이용하는 방법이 동일하다.
value에 state이름, onChange에 e.target.value를 상태변화함수에 전달, 두 값이 가지는 자료형까지 똑같다.

8. 두 개의 state를 하나로 묶기

이럴 경우엔 state를 하나로 묶어주는 방법이 있다.
setState를 할 때 새로운 객체를 만들어서 변경시켜준다.
바뀔 부분은 값을 넣어주고, 유지해야 할 부분은 state를 해준다.

import { useState } from "react";

const DiaryEditor = () => {

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

    return (
    <div className="DiaryEditor">
        <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 DiaryEditor;

9. ...state 같은 스프레드연산자

그러나.. 지금처럼 2개가 아니라 인자가 10개 20개일때는?
한 개만 바꾸려다가 코드량이 길어질 수 있다는 문제점이 있다.
이럴 때 사용할 수 있는 건

            onChange={(e)=>{
                setState({
                    ...state,
                    author: e.target.value
                });
            }}/>

이때 주의해야 할 사항은 스프레드 연산자가 위에 위치해야 한다.
스프레드연산자가 밑에 위치하게 되면 업데이트한 값이 다시 state로 변경되기 때문

10. DiaryEditor 컴포넌트가 핸들링 할 수 있는 감정 선택 select 만들기

<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>

11. 저장 버튼을 생성하여 폼에 입력한 값 전달하기

    const handleSubmit = ()=>{
        console.log(state);
        alert("저장 성공");
    }

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

하단에 onClick이벤트를 넣은 버튼을 추가해주었다.

12. 약간의 CSS추가

가시성을 위해 약간의 style을 입혀주었다.

.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;
}