[React] state로 입력받고 처리하기

이번 글은 리액트에서 state로 입력을 받고 처리하는 내용에 대한 글이다.

 

---

 

[ state 상호작용 ]

사용자에게 입력받은 값을 state 변수를 상태변화로 적용시켜 해당 변수의 값을 출력하는 예제이다.

완성된 예제는 아래 사진과 같이 input 안에 작성한 값이 텍스트 박스 옆에 표시된다.

결과값

 

 

1) 먼저 placeholder를 통해 텍스트 박스가 작성되기 전 "이름"이 표시되도록 한다.

placeholder={"이름"}

 

 

2) 텍스트 박스에 작성되는 값에 따라 변수의 값을 변경해줘야하므로 state를 사용해야한다.

이때 state는 구조분해할당을 사용해 배열을 할당받았다.

const [name, setName] = useState("");

 

 

3) 이벤트를 발생시키는 이벤트 핸들러 부분

이때 매개변수 e는 이벤트를 호출하며 매개변수로 제공되는 이벤트 객체이다.

=> 이벤트 객체는 syntheticBace Event를 반환하는데 이때 반환된 값 중 target의 value를 사용해 입력받은 값을 불러올 수 있다.

const onChangeButton = (e) => {
    setName(e.target.value);
  };

<input value={name} onChange={onChangeButton} placeholder={"이름"} />

import { useState } from "react";

// 간단한 회원가입 폼

const Register = () => {
  const [name, setName] = useState("");
  const onChangeButton = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input value={name} onChange={onChangeButton} placeholder={"이름"} />
      {name}
    </div>
  );
};

export default Register;

 

 

---

 

 

[ 중복되는 부분 없애기 ]

중복되는 정보가 많아졌을 때 중복되는 부분을 묶어 코드를 간소화해준다.

 

아래 예제는 이름 정보만 받는 위의 예제에서 생년월일 정보까지 받게 되었을 때 이를 간소화해주는 내용이다.

 

1) useState()에 초기값으로 반복되는 객체 형태를 넣어준다.

이때 setInput으로 input 안에 객체의 값에 도달해야한다.

const [input, setInput] = useState({
    name : "",
    birth : "",
  });

 

2) name과 birth의 이벤트 핸들링에 setInput()을 넣어 state 변수인 변수 input에 도달한다.

input을 spread해준 뒤 input의 객체에서 키(key)에 부모에서 가져온 입력된 값을 넣어준다.

=> 이때 나머지 값이 초기화되는 것을 방지하기 위해 spread를 사용하고 이후에 수정할 부분을 수정한다.

(spread 사용 이유 : 변경값 외 관련 없는 값은 유지되도록 만들고 변경해주는 것이다.)

const onChangeName = (e) => {
    setInput({
        ...input,
        name : e.target.value
    });
  };
  const onChangeBirth = (e) => {
    setInput({
        ...input,
        birth : e.target.value
    });

 

 

3) 2번 부분의 중복되는 부분 또한 아래 코드처럼 줄여준다.

=> 이때 name은 input 안에 값이다.

const onChange = (e) => {
    setInput({
        ...input,
        [e.target.name] : e.target.value,
    });
  };

 

3) value에 들어가는 값을 input 객체의 name 값으로 설정해준다.

<div>
        <div>
            <input name="name" value={input.name} onChange={onChangeName} placeholder={"이름"} />
        </div>
        <div>
            <input name="birth" value={input.birth} onChange={onChangeName} type="date"></input>
        </div>
</div>

import { useRef,useState } from "react";

// 간단한 회원가입 폼

const Register = () => {
  const [input, setInput] = useState({
    name : "",
    birth : "",
  });

  const onChangeName = (e) => { 
    console.log(e.target.name, e.target.value);
    setInput({
        ...input,
        [e.target.name] : e.target.value,
    });
  };

  return (
    <div>
        <div>
            <input name="name" value={input.name} onChange={onChangeName} placeholder={"이름"} />
        </div>
        <div>
            <input name="birth" value={input.birth} onChange={onChangeName} type="date"></input>
        </div>
    </div>
  );
};

export default Register;

 

console 결과값

 

 

---