[React] 폼 다루기

영어를 소문자로 입력해서 제출했을 때 화면에는 대문자로 보이는 기능을 구현해 볼 것이다.

 

현재 Form컴포넌트의 상황

화면에서 동적으로 관리할 때는 상태를 사용해야하기에 input에 상태를 추가해볼 것이다.

input에 onChange 이벤트 추가해서 입력값이 잘 들어오는지 확인해볼 것이다.

onChange는 Input자체의 event를 listen하는 역할을 하고, input에 값이 바뀔때 마다 함수 호출되는

내장 API이다. 우리가 작성한 js를 통해 변화가 일어났는지 탐지한다.

https://kkamikoon.tistory.com/153

[Javascript] onchange 이벤트로 내용 변경 감지

 

onChange를 통해 변화가 감지되면 handleInputChange함수가 실행된다. 

생성버튼도 안누르고 그냥 dd만 썼을 뿐인데

 

onchange가 두번이나 출력되었다. 잘 감지하는 것 같다.

이렇게 내가 dd라고 치면

콘솔창에 내가 dd라고 치는게 출력되게 하고 싶으면 

 

함수의 매개변수로 event를 받아와서 e.target.value를 하면 콘솔창에 내가 어떤 문자를 쓰는지 출력가능하다.

 

https://developer.mozilla.org/ko/docs/Web/API/Event/target

Event.target - Web API | MDN

이 문서에 따르면 target은 event가 발생한 대상객체를 가리키고 event.target을 통해 이벤트 처리 위임이 가능하다.

 

https://react.vlpt.us/basic/08-manage-input.html

8. input 상태 관리하기 · GitBook

 

위 글에서는 e.target만 하면 input DOM을 가리키고, DOM이 value값 즉, e.target.value를 하면 input에 입력한 값이 무엇인지 알 수 있다.

 

 

이제 입력하는걸 js가 감지하는 것 같으니 대문자로 바꿔보겠다..!

js의 내장 API인 toUpperCase는 대문자로 바꿔준다.

useState의 setValue를 통해 현재 받아오는 문자열을 대문자로 바꿔준다.

 

이러면 콘솔창에만 대문자로 바뀌는데 처음에 입력될 때 내가 소문자로 입력해도 화면 창에는 대문자로 바뀌어서 보여야 한다.

 

해결책은 useState의 value를 input에 property로 넣어주면 된다. 이렇게 사용하면 value를 우리가 동적으로 조절 가능하다.

 

이러면 useState에 따라 value를 동적으로 제어할 수 있다..!

 

++) 다음번에 해야할것

--> input에 한글이나 영어 입력 금지 함수 만들기