그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록State
State

리액트의 Controlled Component와 Uncontrolled Component의 차이가 뭔가요?

실무4/5
설계4/5
인간4/5
기초3/5

면접관의 질문 의도

두 방식을 외워서 나열하는지, 폼 요구사항에 따라 언제 무엇을 고르는지 설명할 수 있는 사람인지 가른다. 후속 질문은 보통 큰 폼에서의 리렌더 비용과 검증 시점 설계로 이어진다.

큐레이션 답변

학습 자료

Controlled Component는 입력값을 리액트 state에 두고 value와 onChange로 동기화한다. 한 글자마다 컴포넌트가 리렌더되는 대신, 검증·마스킹·조건부 UI를 같은 흐름 위에서 묶을 수 있다. Uncontrolled Component는 값을 DOM이 들고 있고 필요할 때만 ref로 읽어 온다. 폼이 단순하고 제출 시점에만 값을 보면 Uncontrolled가 가볍고, 입력 도중 반응을 자주 걸어야 하면 Controlled로 간다.

좋은 답변 구조

  1. 01Controlled와 Uncontrolled가 입력값을 어디에 두는지부터 정의한다
  2. 02리렌더 비용·검증 즉시성·구현 비용을 트레이드오프로 정리한다
  3. 03폼 복잡도와 실시간 반응 필요 여부에 따라 선택 기준을 제시한다
  4. 04react-hook-form 같은 라이브러리가 이 결정을 어떻게 다루는지 짚는다

자주 실수하는 포인트

Controlled가 항상 정답이라 단정하고 Uncontrolled를 구식 방식으로 치부한다
입력값이 state에 있는지 DOM에 있는지 구분 없이 두 방식을 동격으로 나열한다
실시간 검증·리렌더 비용 같은 선택 기준 없이 정의만 비교한다
큰 폼에서 Controlled의 리렌더 부담을 어떻게 줄이는지 답하지 못한다

실무 맥락

  • 회원가입처럼 입력 한 글자마다 유효성 메시지가 바뀌는 복잡한 폼
  • 검색창처럼 제출 시점에 값만 읽으면 되는 단순한 입력
  • 파일 업로드나 외부 에디터처럼 DOM에 값을 맡겨야 하는 위젯 연동
  • 입력 항목이 수십 개라 리렌더 비용을 신경 써야 하는 화면

본인 경험에 녹이는 힌트

Controlled로 짠 큰 폼에서 입력 지연을 겪었다면 react-hook-form이나 ref 분리 도입 경험과 묶을 수 있다

검증 시점을 onChange에서 onBlur로 옮겨본 적이 있다면 UX와 성능 사이의 판단 근거를 풀어낼 수 있다

외부 캘린더나 에디터와 폼을 통합한 적이 있다면 Uncontrolled가 왜 필요했는지 짚을 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1입력 항목이 수십 개인 폼에서 Controlled의 리렌더 비용을 어떻게 줄이나요
Q2react-hook-form은 Uncontrolled를 기본으로 깔면서 검증을 어떻게 붙이나요
Q3라이브러리 없이 ref만 쓰는 Uncontrolled 폼에서 검증과 에러 메시지는 어디에 두나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문