[WEB] React, Uncontrolled Form, useRef() , react hook multiple useRefs

 

지난번엔 Controlled Form을 봤습니다. 이건 React에 의해서 관리되고, state와 form의 value가 항상 일치하는 장점이 있지만, 구현하기가 좀 더 복잡하고, re-render를 1글자마다 하므로 퍼포먼스에 좋지 않았습니다. 물론! 좀 더 정교한 작업을 할 수 있다는 장점이 있긴 합니다.

리액트에서는 Controlled form을 장려합니다.

 

이번 시간에는 그래도 state에 종속되지않고 DOM에 직접 접근해서 값을 가져오고싶다! ex)file API 등등..

이때 사용하는 Uncontrolled Form에 대해서 알아보겠습니다.

 

UnControlled Form

1. 간단하게 만들 수 있다. (대신에 정교한 기능들은 사용하기 어렵다.) state를 바꾸지 않는다.

2. React에 의해서 관리되는게 아니고 DOM을 통해서 직접 가져온다

3. 값을 가져올때 event handler 대신에 ref라는것을 이용한다. (Submit이나 특정 이벤트에서 한번에 input에 있는 값을 가져올 수 있다.)

4. 실시간으로 값을 확인할 수 는 없다.

5. react가 아닌 프로그램을 react로 합치기에 좋다.

 

그러면 예제를 통해서 알아보도록 하겠습니다.

 

const setRef = useRef({});

<FormGroup>
   <Input type="text" innerRef={setRef} name="first" />
</FormGroup>

 

ref는 DOM node나 react element에 접근하는 방법입니다.

 

위와같이 innerRef를 이용해서 (원래는 ref인데 Input component(reactstrap) 이라서 그렇습니다) Input의 값을 가져옵니다.

 

참고로 useRef는 re-render를 하더라도 current가 변하지 않습니다.

 

useRef에는 current property가 있는데, 여기서 값을 계속 관리합니다.

우리는 setRef.current.value 이런식으로 값을 접근해야 합니다.

 

setRef.current를 하면

<Input type="text" name="first" /> 이런식으로 나옵니다.

따라서 setRef.current.value를 하면 폼에 있는 값이 나오게 됩니다.

안에 이런식으로 자동으로 저장이 됩니다.

 

current property가 object를 가지고 있는 형태입니다.

 

 

 

그러면, useRef에 여러개의 Input을 추가하려면 어떻게 할까요?

 

const setRef = useRef({});

onSubmit = (event) => {
   event.preventDefault();
   console.log(setRef.current["first"].value)
}

<FormGroup>
   <Input type="text" innerRef={(elem) => {setRef.current["first"] = elem }} name="first" />
   <Input type="text" innerRef={(elem) => {setRef.current["second"] = elem }} name="second" />
   <Input type="text" innerRef={(elem) => {setRef.current["zzzz"] = elem }} name="third" />
   <Input type="text" innerRef={(elem) => {setRef.current["fourth"] = elem }} name="fourth" />
</FormGroup>

 

처음에 빈 배열로 init을 하고, Input에 ref에 setRef를 던져주면 알아서 자동으로 current property에 first, second, zzzz, fourth를 추가하게 됩니다.

 

접근은 위와같이 하면 된답니다.

 

class로 하면 <Input innerRef = { elem => {this.name = elem}}/> 이런식으로 할 수 있답니다.

 

 

짧게 정리하면,

uncontrolled form 은 만들기 쉬운대신에, 정교한 기능들은 어렵다

React에 의해서 관리가 되는것이 아니다. 따라서

ref를 통해서 리액트 엘리먼트에 접근해야한다. File API같은것들은 이런식으로 하는것이 좋다. 라고 보면 됩니다.

 

참고로 useRef가 불린다고 해서 re-render가 일어나는건 아닙니다.

 

감사합니다

----------------------