<Reactjs>Input상태 관리 , 여러개 Input 상태 관리

저번에 숫자 값의 상태 관리를 useState 를 이용해서 해보았는데 마찬가지로 비슷하게 이번엔 문자값을 변화해주면서 간단한 예제로 정리해보자.

 

우선 InputSample이라는 컴포넌트를 하나 만들어준뒤에 실행시켜주면

 

 

이렇게 정적으로 내가 써준 내용이 보여진다.

 

이 상태에서 글을 입력하게 되면 

이런식으로 상태값이 바뀌고 초기화 버튼을 누르게 되면 다시 빈칸으로 설정 되는 것을 볼 수 있다. 저번 숫자값을 동적으로 변화시키는 글과 달라진 점은 우선 event 를 인자로 받아서 target.value 를 써준 것인데 현재 <input>태그에 입력되어 있는 텍스트로 값을 변화시켜야 되기 때문에 e.target.value 로 값을 세팅해준 것이다. 

 

포인트는 'useState' 를 사용해준 것과 필요에 따라 event 속성을 이용할 줄 알아야 된다는 것!!

 

그리고 주의사항으로 input 과  button 뒤에 써준 on~~으로 시작하는 이벤트메소드는 약속된이름의 메소드고 사진상의 노락색 부분 코드 즉 따로 컴포넌트에서 const로 정의해준 부분의 함수이름은 본인이 원하는 마음대로 지어줘도 상관이 없다><!!

 

그럼이제 여러 Input의 상태를 관리 해주기 위해 다시 

 

이렇게 컴포넌트를 설정 해준뒤에 어떻게 할지 먼저 생각해보자

 

우선 큰가지로 말하면 input 에 'name'을 달아줘서 (input끼리 구분할 키워드) 그 값을 이용해서 조작하는 것이다.

 

 이렇게 써주면 정상적으로 작동하는 것을 볼 수가 있는데 그 원리를 잠시 파헤쳐 보장

기존 한개의 인풋상태관리에서 달라진 점은 바로  여러개의 문자열 (name,nickname) 을 가지고 있는 객체상태를 업데이트 해준다는 것이다!!   중요한 점이 기존의 상태 , 즉 업데이트하기 전 상태를 복사하고(...inputs spread문법 )

나서 거기에다가 새로운 값을 넣어주는 것이다.

 

한가지 꿀팁이라고 생각하는 것이 뽀개기  즉 구조분해 문법을 사용해줌으로써 값을 넣어줄때 더 편하게 넣어줄수 있는 것을 느꼇당><

 

정상적으로 작동하는 것을 볼수 있다.