[REACT] useState, 여러개 Input 활용하기

useState, Input

    - useState 라이브러리는 상태관리를 할 때 사용됩니다.

       const [number, setNumber] = useState(0);      <--- default 값으로 number가 들어갑니다.

       number에 값이 들어갑니다.

import React, {useState} from "react";

function Counter() {
	const [number, setNumber] = useState(0);
    const onIncrease = () => {
    	setNumber(prevNumber => prevNumber + 1);
    }
    const onDecrease = () => {
    	setNumber(prevNumber => prevNumber - 1);
    }
    
    return(
    	<div>
        	<h1>{number}</h1>
            <button onClick = {onIncrease}>+1</button>
            <button onClick = {onDecrase}-1</button>
        </div>
    );
}

export default Counter;

Input

   - input의 onChange를 사용하면, 이벤트 객체 e를 파라미터로 가져올 수 있습니다.

      e.target은 Event가 발생한 DOM을 의미하는데, value를 통하여 값을 가져올 수 있습니다.

 

useState를 사용하면 됩니다. Input의 OnChange라는 이벤트를 사용하면 되는데, 이벤트에 등록되는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있습니다.

import React, {useState} from "react";

function InputSample() {
    const [text, setText] = useState("");

    const onChange = (e) => {
        setText(e.target.value);
    };

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

    return(
        <div>
            <input onChange = {onChange} value = {text}/>
            <button onReset = {onReset}>초기화</button>
            <div>
                <b>값: {text}</b>
            </div>
        </div>
    );
}

export default InputSample;

React 상태에서는 객체를 수정할 때, inputs[name] = value;

대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 그대로 사용해야 합니다.

 

ex>

 

setInputs({

     ...inputs,

     [name] : value

})

 

여기서 사용한 ... 문법은 spread라고 합니다. 객체의 내용을 모두 "펼쳐서" 복사해준다는 의미이다.

이러한 작업을 불변성을 지킨다고도 합니다.

 

만약 여러 개의 Input의 상태를 관리하고자 한다면..

from React, {useState} from "react";

function InputSample() {
	const [inputs, setInputs] = useState({
    	name : "";
        nickname : ""
    });
    
    const {name, nickname} = inputs;
    const onChange = (e) => {
    	const {value, name} = e.target;
        setInputs({
        	...inputs,
            [name] : value
        });
    };
    
    const onReset = () => {
    	setInputs({
        	name : "",
            nickname : "",
        })
    };
    
    return(
        <div>
            <input name = "name" placeholder = "이름" onChange = {onChange} value = {name} />
            <input name = "nickname" placeholder = "닉네임" onChange = {onChange} value = {nickname} />
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name} ({nickname})
            </div>
        </div>
    );
}

export default InputSample;