[React] useState로 사용자의 입력 처리하기: input, button에 이벤트 달기 (일기장 만들기 1탄)

 

이렇게 생긴 일기장을 만들어볼 것이다.

 

---

 

 1. 작성자 입력 받기 

 

 DiaryEditor.js 

import { useState } from "react"; // (1) 사용자의 input 입력값을 처리하기 위함

const DiaryEditor = () => {

const [author, setAuthor] = useState("황혜인"); 
// (2) input의 입력값이 실시간으로 바뀔때마다 상태변화함수(setAuthor)를 이용해서 state(author)에 입력값을 저장해주면 됨 


  return (
 <div className="DiaryEditor">
  <h2>오늘의 일기</h2>
  <div>
    <input value={author} onChange={(e)=>{
      setAuthor(e.target.value)
    }}/> 

   
    // (3) 작성자(author)를 입력받을 input태그에 value 속성으로 전달을 해줌 
    // (3-1) input창에 입력해도 입력이 안됨. 상태는 상태변화함수 없이는 수행이 안되기 때문임
    // (3-2) input이라는 태그에 뭔가 변화가 일어났을 때 상태변화함수를 수행하라고 명시를 해줘야함 
    // (4) onChange "이벤트"(값이 바뀌었을때 수행하는 이벤트임)를 사용 -> 콜백함수를 전달 
    // (4-1) 이 콜백 함수는 이벤트객체 e이라는 것을 매개변수로 전달 받음) 
    // (5) setAuthor(e.target.value) 를 통해 상태를 값이 변화할때마다 그 값으로 업데이트 해줌 
  
  </div>
 </div>
  );
}

export default DiaryEditor;

 

 App.js 

import DiaryEditor from './DiaryEditor';


const App = () => (
  <>

      <DiaryEditor />

  </>
);

export default App;

 

 

 

---

 

 

 2. 본문 입력 받기 

 

 DiaryEditor.js 

 textarea 사용 

import { useState } from "react"; 

const DiaryEditor = () => {

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


  return (
 <div className="DiaryEditor">
  <h2>오늘의 일기</h2>
  <div>
    <input value={author} 
          onChange={(e)=>{
          setAuthor(e.target.value);
    }}
    /> 
  </div>
  <div>
    <textarea value={content} // value에 state의 이름을 넣어준다.
              onChange={(e)=>{
              setContent(e.target.value); // onChange에서 e.target.value를 해당 state의 상태변화함수에 전달해주면 됨
          }}/>
  </div>
 </div>
  );
}

export default DiaryEditor;

 

 

 

 작성자와 본문을 하나의 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;

 

 

 

 

 

 줄여 쓰는법 (스프레드연산자 사용) 

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({
            ...state, //스프레드연산자 사용 (state라는 객체가 가지고 있는 프로퍼티들을 펼쳐줌) *무조건 위에 있어야함
            author: e.target.value, 
          });
    }}
    /> 
  </div>
  <div>
    <textarea value={state.content} 
              onChange={(e)=>{
              setState({
                ...state, //스프레드연산자 사용 (state라는 객체가 가지고 있는 프로퍼티들을 펼쳐줌)
                content: e.target.value, // 입력받은 값으로 바꾸기
                }); 
          }}/>
  </div>
 </div>
  );
}

export default DiaryEditor;

 

 

 

 또 합치기 (change 함수) 

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>
        <textarea name="content" value={state.content} onChange={handleChangeState} />
      </div>
    </div>
  );
};

export default DiaryEditor;

 

 

---

 

 

 3. 감정지수 만들기 

 

import {useState} from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1, //  emotion 프로퍼티 추가
  });

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

export default DiaryEditor;

 

 

 

---

 

 

 4. 저장버튼 만들기 

 

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

 

 

---

 

 

 5. CSS 추가하기 

 

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

 

 

---

 

 

 완성된 모습 

 

 

 

 

참고자료 

인프런: 한입크기로 잘라먹는 리액트