[React] 리액트에서 사용자 입력 처리하기

🔮 Simple Diary 만들기

📐 SETUP

1. 폴더 생성 -> SIMPLEDIARY 라는 이름의 폴더를 생성

2. VSCODE에서 터미널 열고, npx create-react-app simplediary 입력

3. SIMPLEDIARY > simplediary 폴더 생성

4. simplediary 에 있는 파일 및 폴더를 SIMPLEDIARY 폴더로 복붙, simplediary 폴더는 지움 -> 폴더에서 바로 접근하기 위함,,

1. src > App.test.js, logo.svg, reportWebVitals.js, setupTests.js 파일 지우기

2. App.js, index.js 파일에서 5번 과정에 삭제한 파일들을 import 한 거를 지우기

📐 입력창 만들기

📍 DiaryEditor.js 컴포넌트 만들기

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

export default DiaryEditor;
// css에서 스타일링 할 때, DiaryEditor을 통해서 클래스 이름을 지정

//App.js
import "./App.css";
import DiaryEditor from "./DiaryEditor";

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

export default App;

📍 사용자, 내용 입력창 만들기

import { useState } from "react";

const DiaryEditor = () => {
  const [author, setAuthor] = useState("");
  const [content, setContent] = 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); //이름 출력 : author
            setAuthor(e.target.value);
          }}
        />
      </div>

      <div>
        <textarea
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
          }}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

• import { useState } from "react"; : 사용자의 입력에 따라서 변하는 값을 출력해주어야 하므로 state 사용
• const [author, setAuthor] = useState(""); : 사용자의 이름 입력을 위한 state
• const [content, setContent] = useState(""); : content 입력을 위한 state
  

👉 코드 살펴보기
input 태그를 통해서 사용자의 이름을 입력받을 수 있는 창이 생성되었다. 그리고 author state를 위해서 useState를 만들어주었다.
author은 setAuthor state 함수를 통해서만 변경이 되므로 setAuthor 함수를 정의해주어야 한다. 여기서 onChanged 속성을 사용하여 이벤트가 발생을 하면 처리를 해주도록 한다.
이벤트를 통해서 발생한 사용자의 이름(e.target.value)을 setAuthor 함수에 넣어주어서 값을 변경시켜준다.

content 입력창 만드는 방법도 위와 동일하다.

📍 사용자, 내용 입력창의 useState 합치기

변경 부분 🌟

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({
              author: e.target.value,
              content: state.content,
            });
          }}
        />
      </div>
      <div>
        <textarea
          value={state.content} //🌟
          onChange={(e) => {
            //🌟
            setState({
              author: state.author,
              content: e.target.value,
            });
          }}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

지금 useState의 매개변수가 객체이므로 setState 함수를 통해서 객체 를 변경시켜주어야 한다. 근데 이런식으로 하면 객체가 많아진다면 유지해야되는 객체의 값도 많아진다. -> sol. spread 연산자 사용하기

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

📍 onChange 속성 합치기

handleChangeState 함수를 만들어주고, 여기서 변경되는 값이 state.author인지, state.content인지 구별을 해주어서 값을 변경해주어야 한다. -> HOW?

const handleChangeState = (e) => {
  console.log(e.target.name);
  console.log(e.target.value);

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

변경되어야 하는 값을 e.target.name 을 통해서 구별한다. []로 감싸는 이유는,,,,,,,,,?

📍 결과

📐 감정 점수 입력창 만들기

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

여기서 value 값을 {}로 안하였더니 입력값으로 바뀌지 않는 것으로 봐서, 뭔가 변경되는 값은 {}안에 넣어주는 것 같다.

새로운 값이 추가되었으므로 handleChangeState 함수 역시 객체 값에 추가시켜주어야 한다.

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

📍 결과

📐 저장 버튼 만들기

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

...

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

📐 스타일링

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

🌗 결과