제어, 비제어 컴포넌트

제어 컴포넌트

• 폼 데이터가 React 컴포넌트의 state에 의해 제어
• 상태(state)와 입력 필드가 동기화

-예시 코드

function ControlledInput() {
  const [value, setValue] = useState('');
  
  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}

• 상태 변경 시 컴포넌트 리렌더링
• 반응형 상태 관리

비제어 컴포넌트

• DOM 자체에서 폼 데이터를 다룸
• ref를 사용해 DOM 요소에 직접 접근

-예시 코드

function UncontrolledInput() {
  const inputRef = useRef(null);
  
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  
  return (
    <input 
      ref={inputRef} 
      type="text" 
    />
  );
}

• 상태 변경 시 리렌더링 없음
• DOM 요소 직접 참조
• 변경해도 컴포넌트가 다시 그려지지 않음
• inputRef.current는 실제 DOM 요소를 직접 참조합니다. 하지만 "저장"의 관점에서 약간 다름
  1. 참조 방식
     • ref={inputRef}는 React가 해당 DOM 요소에 대한 참조를 inputRef.current에 연결
     • 실제 값(input의 value)은 여전히 DOM에 존재
     • inputRef.current.value로 해당 값에 접근 가능
  2. 메모리 관점
     • inputRef는 메모리에 존재하는 참조 객체
     • current는 실제 DOM 요소를 가리키는 포인터
     • 값 자체는 여전히 DOM에 저장됨