[React] 비제어 컴포넌트와 React-Hook-Form

프로젝트를 구현할 때에는 서버로 사용자가 입력한 정보를 보내주는 기능이 필요합니다. 회원가입이나 파일 전송 등 다양한 기능에서 사용되는데요.

이 글에서는 React-Hook-Form 라이브러리를 소개하고 설명합니다. 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Component): React State에 의해 값이 관리되고, 변경되는 컴포넌트 비제어 컴포넌트(Uncontrolled Component): 상태가 React State가 아닌 외부에서 관리되는 컴포넌트 제어 컴포넌트는 컴포넌트의 상태를 React에서 관리하기 때문에, 컴포넌트의 상태가 변경될 때마다 리렌더링이 발생합니다.

반면, 비제어 컴포넌트는 컴포넌트의 상태를 State에서 관리하지 않고 DOM으로 바로 접근(ref)하기 때문에 이벤트가 발생해도 화면의 리렌더링이 일어나지 않습니다. 제어 컴포넌트로 폼 구현하기 import { useState } from 'react'; const Form = (...