리액트 공부하기 - 컨트롤 컴포넌트(Controlled Component)

Studying/React

리액트 공부하기 - 컨트롤 컴포넌트(Controlled Component)

creamymood 2025. 4. 11. 13:14

1. 컨트롤 컴포넌트가 뭘까? 비유로써 알아보기

2. 상위 개념과 하위 개념

3. 어떨 때 주로 사용되는지, 대체 할 수 있는 useRef

💡✨컨트롤 컴포넌트가 뭘까? 비유로써 알아보기

🎬 1. 비제어 컴포넌트(Uncontrolled Component)

너는 지금 "입력창(input)" 역할이야.

💬 누군가 "이름을 입력해줘!" 라고 해.
그래서 네 마음대로 쓰기 시작해.
Jane이라고 쓰고, 이 내용은 너 혼자만 알고 있어.

React(관리자)는 몰라.
React는 ref 같은 걸로 나중에 몰래 엿봐야 해.

📦 React: "Jane이 뭘 썼는지 모르겠네… 나중에 확인해야겠다."

🎬 2. 제어 컴포넌트(Controlled Component)

이제 다시 "입력창 역할"인 너한테 요청이 와.

하지만 이번엔 네가 직접 쓰는 게 아니라,
📢 React(관리자)가 알려주는 것만 보여줄 수 있어.

너는 마음대로 쓰지 못하고, React가 말해주는 값을 보여줘야 해!

사용자가 키보드로 입력하면 →
너는 React에게 "이 사람이 J 눌렀어요!" 라고 말함 →
React는 J를 state에 저장함 →
React는 다시 너에게 "J 보여줘!" 라고 함 →
그래서 너는 그걸 표시함

→ 이게 바로 Controlled Component야!

📦 React: "모든 걸 내가 다 통제할게. 입력값도 내 상태에 저장해서, 언제든 확인하고 조작할 수 있게."

💡✨상위 개념과 하위 개념

1. 상위 개념: 폼(Form)과 상태(State)

리액트에서는 사용자 입력을 처리할 때 HTML 폼 요소들 (<input>, <textarea>, <select> 등)을 사용 한다.
그런데 리액트는 "상태(state)로 UI를 관리하는" 프레임워크 !

그래서 폼의 값도 리액트가 상태를 통해 제어할 수 있다.
이런 제어 방식이 바로 컨트롤 컴포넌트와 연결된다.

2. 하위 개념: Controlled vs Uncontrolled

- Controlled Component (제어 컴포넌트)

입력값을 컴포넌트의 state로 관리하는 폼 요소.

사용자가 input에 입력 → onChange로 이벤트 감지 → setState로 상태 업데이트 → input value도 변경됨.

즉, 폼의 값은 항상 리액트 상태(state)에 의해 "제어됨".

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      value={name} // 상태로 제어
      onChange={(e) => setName(e.target.value)} // 입력이 바뀌면 상태도 바꿈
    />
  );
}

→ 이 input은 사용자가 입력해도 실제 데이터는 리액트 state에 저장돼 있어. 그래서 이걸 Controlled Component라고 불러.

- Uncontrolled Component (비제어 컴포넌트)

- 리액트가 값을 직접 관리하지 않고, DOM 자체에서 값을 관리함.

- 보통 useRef를 이용해서 값을 가져옴.

import { useRef } from 'react';

function MyForm() {
  const inputRef = useRef();

  const handleSubmit = () => {
    console.log(inputRef.current.value); // DOM에서 직접 값 꺼냄
  };

  return <input type="text" ref={inputRef} />;
}

→ 이런 방식은 DOM에 맡기기 때문에 Uncontrolled Component라고 해.