[React] 제어 / 비제어 컴포넌트

Form과 제어 컴포넌트

 

Form element

• <input>
• <textarea>
• <select>

폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

그러나 기본적으로 리액트에서도 state를 이용하여 변경된 상태를 setState를 통해 업데이트를 하는데 그렇다면 이 둘은 어떻게 같이 쓰이면서 관리할 수 있을까??

 

💡바로 제어 컴포넌트를 이용하는 것이다.

 

제어 컴포넌트란?

데이터를 변경할 수 있는 모든 방법에 대해 이벤트 헨들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결하는 방식으로 기존에 우리가 사용하던 handle~ 방법이라고 이해하면 된다. 그러나 이벤트 헨들러 작성이 많아지게 된다면 굉장히 번거롭기 때문에 다른 방식으로도 폼 요소의 업데이트 구현이 가능하다.

export default function SimpleForm(){
   const handleChange = (e) => {
     console.log(e.target.value);
   };
   
   return(
     <>
       <label>닉네임 :</label>
       <input type="text" name="nickname" onChange={handleChange} />
     </>
   )
}

 

비제어 컴포넌트란?

대부분 폼 구현 시, 제어 컴포넌트를 사용하는 것이 좋으나 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어지므로 모든 state 업데이트에 대한 이벤트 헨들러를 작성하는 대신 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.

ref 사용 방법은 다음과 같다.

 

클래스 컴포넌트 

import {createRef} from "react"

함수 컴포넌트

import {useRef} from "react"

 

ref를 활용하여 비제어 컴포넌트 방식으로 폼을 다뤄보도록 하자.

export default function SimpleForm(){
   const ref = useRef();
   const handleChange = (e) => {
     console.log(e.target.value);
   };
   
   return(
     <>
       <label>닉네임 :</label>
       <input type="text" name="nickname" onChange={handleChange} ref={ref}/>
     </>
   )
}

console.log(ref);

콘솔창으로 ref 값을 확인해보면 

{ 현재 :  HTMLInputElement }

현재 : < input 유형 =" 텍스트 " 이름 =" 닉네임 " > </ input >

위와 같이 객체 형태로 input 태그 값이 나온다. 

그렇다면 정말 ref를 통해 값을 받아올 수 있는 지 handleSubmit 이벤트 함수를 통해 확인해보도록 하자.

function handleSubmit(e){
  e.preventDefault();
  alert(ref.current.value);
}

<form onSubmit={handleSubmit}>
  <label>닉네임 :</label>
  <input type="text" name="nickname" ref={ref} />
  <input type="submit value="제출" />
</form>

 

단, 공식문서에서는 폼을 구현하는데 있어 제어 컴포넌트를 사용하는 것이 좋다. 라고 나와있지만 대안으로써 비제어 컴포넌트 방식도 존재하니 둘의 장단점을 따져가며 사용하는 것을 추천하는 바임!