[React] Study #8 | 여러개의 input 상태 관리하기 (useState)

이번엔 input이 여러개일 경우 어떻게 관리해야하는지 알아보자!

 

구현해볼 것은 이름과 닉네임을 입력하면 값 옆의 부분에 같이 입력이 되고, 초기화를 시키면 이름과 닉네임이 모두 초기화!

💡Idea

• input의 개수가 여러개가 됐을 때는, 단순히 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현할 수 있다.
  • 하지만, 좋지 않은 방법!
• input에 name을 설정하고 이벤트가 발생했을 때, 이 값을 참조 + useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주기
  • 더 좋은 방법!

import 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,  // 기존의 inputs 객체들을 복사
            [name]: value,
        })
    }

    const onReset = () =>{
        setInputs({
            name: '',
            nickname: '',
        });
    }

    return (
        <div>
            <input placeholder="이름" onChange={onChange} name="name" value={name}/>
            <input placeholder="닉네임" onChange={onChange} name="nickname" value={nickname}/>
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값: </b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InputSample

 

---

➕ 불변성?

• 위의 코드에서 사용한 ... 문법은 바로 spread 문법!
  • 객체의 내용을 모두 펼쳐서 기존 객체를 복사해준다.
• spread 문법을 이용한 작업을 해주는 것을 "불변성을 지킨다" 라고한다.
  • 불변성을 지켜주어야만 리액트 컴포넌트에서 "상태가 업데이트 됐다!"를  감지할 수 있고 이에 따라 필요한 리렌더링이 진행된다.
    • input[name] = value 이런식으로 기존 상태를 직접 수정하면, 값을 바궈도 리렌더링이 불가
• 일단 이것만 기억하자! 리액트에서 객체를 업데이트하게 될때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서,  새 객체에 변화를 주어야한다.

 

---

Reference

https://react.vlpt.us/