7. input 상태 관리하기

input 태그의 상태 관리

 

리액테에서 사용자가 입력을 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보겠습니다. 우리는 components 폴더 하위에 InputSample.js를 만들도록 하겠습니다.

 

그 다음 우리는 렌더링을 해주기 위해서 App 컴포넌트에 추가해주도록 합니다.

렌더링 한 결과를 보면

위와 같이 렌더링이 된 것을 확인할 수 있습니다. input에 입력하는 값이 하단에 나타나게 하고 input에 입력하는 값이 하단에 나타나게 하고 초기화 버튼을 누르면 input의 값이 비워지도록 구현해보도록 하겠습니다. 이번에도 useStae를 사용하여 onChange라는 이벤트를 사용하여 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데 e.target은 이벤트가 발생한 DOM인 input DOM을 가리키게 됩니다. 즉 e.target.value는 이벤트가 발생한 DOM 즉 input 태그에 입력한 값이 무엇인지 알게 해줍니다.

 

input 태그에 값을 입력하면 onChange가 발생하게 되고 그렇게 되면 onChange 함수가 발생해 그 값을 <b>안에 렌더링을 해주게 됩니다.

 

 

여러 개의 input 상태 관리하기

 

이번에 여러 개의 input이 있을 떄 관리하는 방법에 대해서 알아보겠습니다. 기존에 작성했던 onChange와 onReset 함수를 비우도록 하겠습니다.

코드를 이렇게 바꾸게 되면 2개의 input 태그가 생긴 것을 확인할 수 있습니다.

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

 

우리는 여러 useState를 사용하는 방법이 아닌 다른 방법을 사용해보겠습니다. InputSampe 컴포넌트를 수정해주도록 합니다.

 

리액트에서 객체를 수정해야할 때는 

 

inputs[name] = value;

 

이런식으로 직접 수정을 하면 안됩니다. 그 대신에 새로운 객체를 만들어서 새로운 객체에 이를 상태로 사용해 주어야 합니다.

 

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

 

여기서 사용한 ... 문법은 spread 문법으로 객체의 내용을 모두 펼쳐서 기존 객체를 복사해줍니다. 우리는 이러한 작업을 불변성을 지킨다라고 합니다. 불변성을 지켜주어야만 리액트는 컴포넌트에서 상태 업데이트 됐음을 감지할 수 있고 이에 따라 필요한 리 렌더링이 진행됩니다. 

 

만약 inputs[name] =value로 기존 상태를 직접 수정하게 된다면 값을 바꿔도 리랜더링은 되지 않습니다. 추가적으로 리액트는 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있습니다. 

 

즉 간단히 말하면 리액트에서 객체를 업데이트 하게 될 때는 기존 객체를 직접 수정하면 안되고 새로운 객체를 만들어서 새 객체 변화를 주어야 합니다.