2022-12-07 [새싹 프론트엔드] useState 객체로 값 받아오기

input, textarea의 자료형이같고 onChange,e.target.value 를 가지고 있다. 
이렇게 동작이 비슷한 useState는 하나의 useState로 묶을수 있으며 이럴땐 
값을 객체형식으로 받아오면 된다.

아래코드는 두개의 user입력값을 받고 두개의 useState를 사용했을때의 코드이다.

 

import React from "react";
import { useState } from "react";

const DiaryEditor = () => {
  const [author, setAuthor] = useState("");
  const [content, setContent] = useState("");
  // input, textarea의 자료형이같고 onChange,e.target.value 를 가지고 있다. 
  //이렇게 동작이 비슷한 useState는 하나의 useState로 묶을수 있으며 이럴땐 
  //값을 객체형식으로 받아오면 된다.
  return (
    <div>
      <h2>오늘의 일기</h2>
      <input
        type="text"
        value={author}
        onChange={(e) => {
          setAuthor(e.target.value);
        }}
      />
      <div>
        <textarea
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
          }}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

useState의 값을 객체로 받아오기

객체의 값을 바꾸려면 새로운 객체를 만들어서 값을 바꿔줘야한다.

 

import React from "react";
import { useState } from "react";

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

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

    // 해당입력값에 name=""을 만들어주고 [대괄호] 를 열어 key값으로 설정할 e객체를 넣어주고 : value 객체를 만드는것과 같은 형식으로 setState를 설정해준다.
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  console.log(state.author);
  console.log(state.content);
  return (
    <div>
      <h2>오늘의 일기</h2>
      <input
        name="author"
        type="text"
        //e객체를 사용하기위해서 value속성을 사용함
        onChange={handleChangeState}
      />
      <div>
        <textarea
          name="content"
          //e객체를 사용하기위해서 value속성을 사용함
          onChange={handleChangeState}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  8주차 블로그 포스팅