react study / input처리하기 / 여러개 input 처리

https://binggamel.tistory.com/m/100

react study / 컴포넌트에서 값 받아 바꾸기

👆컴포넌트 값 바꾸기 / useState 사용

input을 받아 처리하기

import React from 'react';
import { 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 onClick={onReset}>초기화</button>
            <div>
                <d>값: {text}</d>
            </div>

        </div>
    );
}

export default InputSample;

Counter에 쓰인 useState를 사용해서 처리할 수 있다

input의 onChange 이벤트를 사용!

이벤트 객체를 e로 받아 사용함

e.target 👉 input DOM

e.target.value 👉 현재 input에 입력한 값을 가져옴

 

---

여러개 input을 받아 처리해보자

input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참고도록 하자

 

InputSample2.js

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

function InputSample2() {

    const [inputs, setInputs] = useState({
        nikname: '',
        roles:''
    });

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


    const onChange = (e) => {
        const { value, name } = e.target; //태그 요소인 name값과 value값을 받는다
        setInputs({
            ...inputs, //spread - 리액트의 불변성을 지키기위해 새로운 객체를 만들어 거기에 변화를 준다
            [name]:value //name 키를 가진 값을 value로 설정
        });
    }

    const onReset = () => {
        setInputs({
            nikname: '',
            roles:''
        })
    }

    
    return (
        <div>
            <input name="nikname" placeholder="nikname" onChange={onChange} value={ nikname }/>
            <input name="roles" placeholder="roles" onChange={onChange} value={ roles }/>
            <button onClick={onReset}>reset</button>

            <div>
                <b>값: </b>
                {nikname} | {roles}
            </div>
        </div>
    )
}

export default InputSample2;

...inputs으로 spread문법을 이용하는 이유는 react의 불변성을 지키기 위함이다

불변성을 지켜줘야만 리액트 컴포넌트에서 상태가 업데이트 됐음을 감지 할 수 있고 이에따라 필요한 리렌더링이 진행된다

컴포넌트 업데이트 성능 최적화를 시킬 수 있다

inputs[name] = value 이런식으로 기존상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다

👉 새로운 객체를 만들어서 그 새 객체에 변화를 주어야 한다

 

👇참고서!!

react.vlpt.us/basic/09-multiple-inputs.html