여러개의 input 상태 관리하기

앞서 작업한 input 컴포넌트에 이어서 이번에는 여러개의 input 의 값들의 상태를 관리했다.

 

onchcnge 함수를 여러개 만드는 것 보다 아래에 객체를 생성하여 여러개의 input 을 관리하는 방법의 코드를 작성하였다.

import React ,{useState} from 'react';

function Inputs() {

    const [text, setText] = useState({
        num:'',
        nickname:'',

    });

    const { num, nickname } = text; // 비구조화 할당을 통해 값 추출
    console.log({num})

const change = (e) => {
    const { value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setText({
        ...text, // 기존의 input 객체를 복사한 뒤
        [name] : value  // name 키를 가진 값을 value 로 설정
        
    });
    console.log({num});
    console.log({nickname});

};

const reset = () => {
    setText({
        num: '',
        nickname: '',
    });
};

    return(
        <>
        <input  onChange={change} name="num" value={num}></input>
        <input  onChange={change} name="nickname" value={nickname}></input>
        <button onClick={reset}>초기화</button>

        <div>
            <b>이름:{num}<br/>닉네임:{nickname}</b>
        </div>
        </>


    );
}
export default Inputs;

중요포인트

1. 객체를 생성하고 비구조화 할당을 통해 값을 추출한다

 

2. 온체인지 함수 속에 e.target 에서 name 과 value 를 추출한다.

 

3. ...스프레드함수로 초기 객체를 복사하여 가져온다 ( 불변성을 지키기 위해)

 

4, 마지막으로 네임으로 받아온 객체의 메소드에 : 벨류로 받아온 값을 넣는 코드를 작성하여 

스프레드 함수로 복사하여 가져온 초기객체의 복사본을 바꿔준다.