[React] useState로 input 상태 관리하기

이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요!

let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다.

useState로 선언한 state를 setState함수를 통해 값을 변경하면 다시 렌더링하여 반영된 값을 화면에 출력해줍니다.

useState()의 인수로 state의 초기값을 주며, 배열로 state와 setState함수를 받습니다.

1-1) text상태 관리하기 (input이 1개일 경우)

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onReset = () => {
    setText("");
  };
  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
};

export default App;

 

1-2) text상태 관리하기 (input이 2개 이상일 경우)

input이 여러 개일 경우, useState와 onChange를 여러번 사용해서도 구현할 수 있지만 가장 좋은 방법은 아닙니다.

더 좋은 방법은 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것입니다.

그리고 useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 합니다.

1개일 때는 그냥 setState(e.target.value)를 하였지만, 2개 이상일 때는 useState를 객체로 저장하였기에 useState({[e.target.name] : e.target.value})를 해주어야합니다. 

export default App;

const [inputs,setInputs] = useState({
  author:"",
  content:"",
  emotion:1,
})
const handleChange = (e) => {
	setInputs({
    ...inputs, // 기존의 input 객체를 복사한 뒤 
    [e.target.name] : e.target.value, // name키를 가진 값을 value로 설정
  })
}
<input
  name="author"
  value={inputs.author}
  onChange={handleChange}
/>

 

 

2. checkbox 상태 관리하기

import React, { useState } from "react";
import Header from "../../components/Header";

const SignUpPrivacy = () => {
  const list = [
    {
      id: 0,
      data: "네이버 이용약관, 개인정보 수집 및 이용, 위치기반서비스 이용약관(선택),프로모션 정보 수신(선택)에 모두 동의합니다.",
    },
    { id: 1, data: "네이버 이용약관 동의(필수)" },
    { id: 2, data: "개인정보 수집 및 이용 동의(필수)" },
    { id: 3, data: "위치기반서비스 이용약관 동의(선택)" },
    { id: 4, data: "프로모션 정보 수신 동의(선택)" },
  ];

  const [checkedList, setCheckedList] = useState([]);
  const onCheckedElement = (checked, item) => {
    if (checked) {
      setCheckedList([...checkedList, parseInt(item)]);
    } else {
      setCheckedList(checkedList.filter((el) => el !== item));
    }
  };
  const onRemove = (item) => {
    setCheckedList(checkedList.filter((el) => el !== item));
  };
  console.log(checkedList);

  return (
    <div className="SignUpPrivacy">
      <Header />
      <section>
        {list.map((it) => {
          return (
            <label key={it.id}>
              <input
                type="checkbox"
                value={it.id}
                onChange={(e) => {
                  onCheckedElement(e.target.checked, e.target.value);
                }}
              />
              {it.data}
            </label>
          );
        })}
      </section>
    </div>
  );
};

export default SignUpPrivacy;

 

 

3-1) input요소에 focus시켜주기 ; autoFocus

<input type="text" autoFocus />

 

3-2)input요소에 focus시켜주기 ; useRef

1. 변수명에 useRef()삽입

2. 해당 변수를 input의 ref속성에 설정

3. 변수.current.focus로 사용

import React, { useEffect, useRef } from "react";

const App = () => {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
};

export default App;