[React] input의 value 가져오기

로그인 또는 회원가입 등과 같이 사용자로부터 필요한 정보를 받아야 할 때가 있다. 일반적으로 값을 받아올 때는 input 요소를 사용한다.

 

React에서 input 요소를 이용하여 사용자로부터 값을 받아 사용할 수 있는 방법은 무엇이 있을까?

 

input의 값을 받아 사용하는 3가지 방법에 대해 알아보자.

(아래의 예시는 React와 TypeScript, Styled-Component를 사용하였다.)

 

1. useState을 이용하여 input의 value 가져오기

가장 쉽게 해볼 수 있는 것은 React Hook 중에 하나인 useState을 사용하여 input의 값을 상태로 관리하는 방법이다.

 

먼저 useState을 사용하여 id와 password 변수를 선언한다. 그런 다음, setId와 setPassword 함수를 input의 onChage 함수 안에 넣어 사용자가 값을 입력할 때마다 상태값이 바뀌면서 입력된 정보를 받아서 사용할 수 있다.

 

여기서 기억해야 하는 것은 리액트는 상태가 변할때마다 렌더링을 다시 한다는 것이다.

 

위에서 input에 값을 입력할 때마다 렌더링이 되고 있다는 것을 시각적으로 보여주고 있다. 사용자가 값을 입력할 때마다 onChage 이벤트가 발생하게 되면서 onChage 이벤트 핸들러 함수가 호출된다.

 

우리는 onChage 이벤트가 발생할 때마다 상태의 값이 변경되도록 했기 때문에, 사용자가 input 요소에 값을 입력할 때마다 컴포넌트가 다시 렌더링이 되는 것이다.

 

2. useRef를 이용하여 input의 value 가져오기

useRef는 함수형 컴포넌트에서 DOM 노드나 다른 값을 저장하기 위해서 사용하는 React Hook이다. useRef를 사용하면 함수형 컴포넌트에서도 DOM 노드나 다른 값을 참조할 수 있게 되는데, useRef를 사용하면 useRef() 함수를 호출하여 ref객체를 생성할 수 있고, 이 ref객체는  .current 라는 속성에 원하는 값을 할당할 수 있다.

 

먼저 useRef를 사용하여 input 요소의 값을 참조하는 userId와 userPassword 객체를 생성한 후, 생성한 객체를 input 요소의 ref 속성에 할당하게 되면 input 요소를 참조할 수 있게 된다. 그 다음 onSubmit 함수가 호출 될 때마다 userId, userPassword 객체의  .current  속성을 사용하여 사용자가 입력한 값을 가져와 사용할 수 있다. 

 

 

일반적으로 Ref는 DOM 요소에 접근 할 때 사용한다. 그렇기 때문에 목적에 맞지 않게 무분별하게 사용하는 것은 좋지 않으니 주의해야 한다.

 

🖐🏻 참고 - Ref를 사용해야 할때

• 특정 input에 포커스 주기
• 스크롤 박스 조절하기
• Canvas 요소에 그림 그리기 또는 media playback 등을 사용하기

 

3. FormData를 이용하여 input의 value 가져오기

FormData는 form 필드와 그 값을 key와 value로 쉽게 생성할 수 있는 객체이다. HTTP 요청의 일부로 데이터를 쉽게 구성하고 보낼 수 있고 데이터를 서버로 전송하기 위해 API와 함께 사용할 수 있다.

let formData = new FormData([form])

 

HTML에 form 요소가 있는 경우, 위 코드와 같이 작성하면 해당 폼 요소의 필드 전체가 자동 반영되어 그 안에 있는 값을 key와 value로 가져올 수 있다.

onSubmit 함수를 form 요소의 onSubmit 이벤트가 발생할 때 실행되도록 만든다. 사용자가 아이디와 비밀번호를 입력한 후 onSubmit 이벤트를 발생시키면 사용자가 입력한 아이디와 비밀번호를 useInfo라는 객체에 담아 사용할 수 있다.

 

 

---

결론👍🏻

프로젝트를 진행할 때 주로 useState을 사용하여 input의 값을 받아 상태로 관리하였다. (useRef를 사용하는 것은 사용 목적에 맞지 않기 때문에 필요한 상황이 아니면 사용하지 않았다.)

그런데 사용자로부터 받아야하는 정보가 많아지거나 또는 자식 컴포넌트가 많고 깊이가 깊어질 수록 값을 상태로 관리하는데 불편함이 있었다. (state을 자식 컴포넌트에게 porps로 내려줘야 하고 이에 따른 렌더링에 대해서도 고민해야 한다🥲) 그러다가 공부를 하던 중 FormData를 사용하여 input의 값을 가져올 수 있는 방법에 대해 알게 되었고 사용해 본 결과 useSate을 사용하던 것 보다 간편하고 코드의 길이를 많이 줄일 수 있었다.

 

하지만 무조건 FormData를 사용하는 것이 맞는 방법은 아니고, 각각의 방법들은 다 장단점이 있다. 그렇기 때문에 무엇을 위해 사용해야하는지 그 목적을 분명하게 한 후, 목적에 맞게 사용하면 될 것 같다.

 

 

---

참고

https://ko.reactjs.org/docs/hooks-reference.html#usestate  

https://ko.reactjs.org/docs/hooks-reference.html#useref 

https://developer.mozilla.org/ko/docs/Web/API/FormData      

https://ko.javascript.info/formdata