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

오늘은 얼마 전에 스터디에서 선배님이 오늘 주제에 대해서 질문을 해주셨는데 좀 더 유연하게 대답하지 못한 것 같아 이 둘에 대해서 좀 더 자세히 알아보려고 합니다

---

❓ 제어 비제어? 그게 뭘까?

먼저 제어 컴포넌트는 사용자의 입력을 state로 관리하고 업데이트합니다

React에서 state 값이며 setState로 업데이트 됩니다

import { useState } from "react";

export function Example() {
  const [value, setValue] = useState("");
  return (
    <div>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

 

비제어 컴포넌트는 DOM을 직접 조작하여 데이터를 관리합니다
상태를 가지지 않으며 입력에 대한 DOM 이벤트를 직접 처리하여 데이터를 추출합니다

import { useRef } from "react";

export function Example() {
    const input = useRef("");
  return (
    <div>
      <input type="text" ref={input} />
    </div>
  );
}

---

❓ 그래서 둘 어떨 때 사용하는게 좋을까?

제어 컴포넌트

• 즉각적인 피드백이 필요할 때

비제어 컴포넌트

• 불필요한 렌더링과 값 동기화가 싫을 때 
• 즉각적인 피드백이 불필요하고 제출시에만 값이 필요할 때

---

마무리

오늘은 제어 컴포넌트 비제어 컴포넌트에 대해서 알아보았는데 상세하게 알게 되어 좋았던거 같습니다