useState 객체로 사용하기(input 예시) [Today I Learned - React]

input의 개수가 여러개가 되었을 때, 
단순히 useState 를 여러번 사용하고
onChange 도 여러개 만들어서 구현할 수 있지만

=> 좋은 방법이 아님!

 

 

여기 더 좋은 방법 설명 시작!

 

01 

<input name="name" onChange={onChange} value={name}/>
<input name="nickname" onChange={onChange} value={nickname}/>

일단, 위와 같이 input 태그에 name 속성을 설정하고

이벤트가 발생되었을 때 이 값을 참조하도록 설정.

 

 

 

02

  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

useState 에는 문자열이 아니라 객체 형태의 상태를 관리해주기

 

 

03

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

객체를 수정할 때에는
inputs[name] = value 와 같이 직접 수정하면 안되고

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

와 같이 새로운 객체를 생성해서 변화를 주고 사용해야한다.

 

 

이러한 작업을 "불변성을 지킨다" 라고 부름

 

https://velog.io/@co_mong/JS-%EB%B6%88%EB%B3%80%EC%84%B1Immutability

[JS] 불변성(Immutability)

 

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

 

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


또, 
리액트에서 불변성을 지켜주어야
컴포넌트 업데이트 성능 최적화를 제대로 할 수 있음

 

 

공부 참고 사이트

 

https://react.vlpt.us/