input 상태 관리

 

components/InputSample.jsx

import React, { useState } from "react";

function InputSamle() {
	// text 의 초기 값을 "" 로 설정
	const [text, setText] = useState("");
	// e.target 이벤트가 발생한 DOM input DOM
	const displayText = (e) => {
		setText(e.target.value);
	};

	const onReset = () => {
		setText("");
	};

	return (
		<div>
			<input onChange={displayText} value={text}></input>
			<button onClick={onReset}>reset</button>
			<div>
				<b>값 : {text}</b>
			</div>
		</div>
	);
}

export default InputSamle;

 

App.js

 

import './App.css';
import InputSample from './components/InputSample';

function App() {
  return (
    <div className="CustomStyle">
      <InputSample></InputSample>
    </div>
  );
}

export default App;

 

결과

reset을 누르면 텍스트 비움

input에 값이 입력되는 즉시 아래 값: 에 반영

---

 

여러개의 input 상태 관리

 

import React, { useState } from "react";

function InputSamle() {

	const [inputs, setInputs] = useState({
		id: "",
		nickname: ""
	});

	// 비구조화 할당을 통해 값 추출
	const { id, nickname } = inputs;

	const displayText = (e) => {
		// e.target에서 value 와 name 를 추출
		const { value, name } = e.target;
		setInputs({
			// 기존의 input 객체를 복사(불변성을 위해서) 
			...inputs,
			// name 키를 가진 값을 value 로 변경
			[name]: value
		});
	};

	const onRset = () => {
		setInputs({
			id: "",
			nickname: ""
		});
	};

		return (
			<div>
				<input name="id" onChange={displayText} value={id} placeholder="아이디"></input>
				<input name="nickname" onChange={displayText} value={nickname} placeholder="닉네임"></input>
				<button onClick={onRset}>reset</button>
				<div>
					<b>값 : {id}({nickname})</b>
				</div>
			</div>
		);
	}

	export default InputSamle;

 

결과

* 리액트 상태에서 객체를 수정해야 할 때에는

inputs[name] = value;

이런식으로 직접 수정하면 안된다.

 

새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해야함

 

setInputs({
  ...inputs,
  [name]: value
});

 

...

이 문법은 spread 문법

객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해준다

 

이런 작업을, "불변성을 지킨다" 라고 부름

이 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지

> 필요한 리렌더링이 진행

 

만약 inputs[name] = value 처럼 기존 상태를 직접 수정하게 되면 리렌더링이 되지 않는다.

 

 

** 리액트에서 객체를 업데이트하게 될 떄에는 직접수정X

** 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다.

 

참고 : https://react.vlpt.us/basic/09-multiple-inputs.html