useState로 여러개의 input 상태 관리하기

출처 : https://hyeok999.github.io/2020/01/04/react-velo-07/

#1 들어가기

안녕하세요. 

 

오늘은 useState로 여러개의 input 상태를 관리하는 법을 포스트 하도록 하겠습니다.

 

저는 내 정보관리 페이지를 작업을 하고 있는데요.

내 정보관리는 워낙 관리해야 할 내용들도 많고 그만큼 변경도 많이 일어나는 페이지입니다.

 

그에 따라 여러 개의 iuput창을 활용하게 되는데, input 상태가 늘어날때마다 useState와 onChange 핸들러를 만드는 작업이 너무 싫었습니다. 그래서 이를 효율적으로 관리하는 방법에 대해서 고민하게 되었습니다.

 

#2 과정

기존에 이런 코드로 변경되는 사항에 대해서 관리를 하고 있었습니다.

const [corporationName, setCorporationName] = useState("");
const [corporationNumber, setCorporationNumber] = useState("");
const [corporationTelephone, setCorporationTelephone] = useState("");


const onChangeCorporationName = e => {
   setCorporationName(e.target.value);
};
  
const onChangeCorporationNumber = e => {
   setCorporationNumber(e.target.value);
};

const onChangeCorporationTelephone = e => {
   setCorporationTelephone(e.target.value);
};

일단, 똑같은 역할을 하고 있는 코드들이 3개나 되죠?

그나마 3개면 다행인데 100개면? 100개의 똑같은 역할을 하는 코드를 만든다?

물론 해결은 할 수 있겠지만 가독성, 효율성 다 떨어질 수 밖에 없는 작업입니다.

 

이러한 부분을 어떻게 해결할 수 있을까요?

input에 name을 설정하고 이벤트가 발생했을 때 값을 참조하는 것입니다.

그리고 useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주게 되면 해결할 수 있습니다.

const [corporationData, setCorporationData] = useState({
  corporationName: "",
  corporationNumber: "",
  corporationTelephone: "",
});
  
const onChangeCorporationData = e => {
  const { value, name } = e.target; // e.target에서 name, value를 추출
  setCorporationData({
    ...corporationData, // 기존 객체 복사
    [name]: value, // name 키를 가진 값을 value로 설정
  });
};

여기서 주의할 점은 리액트 상태에서 객체를 수정할 때는 불변성을 지켜줘야 한다는 점 다들 아시죠?

spread 문법을 사용하여, 기존 객체를 복사하여 새로운 객체를 만들고 새로운 객체에서 상태를 업데이트 해줘야 합니다.

여기서 [name]과 같이 대괄호를 사용하는 것은 변수로서 어떤 값을 참조하게 될 지 모르기 때문입니다. (해당 키를 동적으로 설정하기 위함)

#3 정리하기

오늘 포스트한 내용을 다시 정리해보면

 

1. input에서 name을 설정하고 이벤트가 발생했을 때 값을 참조하게 만든다.

2. useState에서는 문자열이 아니라 객체 형태로 상태를 관리한다.

3. 리액트에서 객체를 업데이트하게 될 때는 기존 객체를 직접 수정하면 리렌더링이 되지 않는다. (불변성을 지켜야 한다.)

4. 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다. (spread 문법 활용)

5. 리액트에서는 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있습니다.

 

많은 코드들을 작업하다보면 반복되는 작업이 조금이라도 있을 때, 조금 더 효율적으로 관리할 수 있는 방법은 없을까? 생각하게 되는 것 같습니다.

 

시간에 쫓겨 나중에 해야지 하고 넘어가는 부분도 있지만 시간을 투자해서 반드시 리팩토링 하는 과정을 거쳐야 될 것 같습니다.

 

 

참고한 글들

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

https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4