비제어 컴포넌트 vs 제어 컴포넌트

📍비교

✅비제어 컴포넌트 (uncontrolled)

- 로컬 변수만을 갖는 컴포넌트

- 부모 컴포넌트가 영향을 줄 수 없음

 

✅제어 컴포넌트 (controlled)
- 컴포넌트의 중요한 정보가 props에 의해 구동됨
- 부모 컴포넌트가 props를 통해 이 컴포넌트를 완전히 제어

컴포넌트 대신 element에도 적용할 수 있다

 

📍비제어 input element 예시

- 전통적인 HTML의 form 입력과 비슷

- Form 컴포넌트는 input에서 값을 "pull" 해와야 함 (예 - form 제출 전에)

예) input element의 실시간으로 바뀌는 값을 ref 를 통해서 구할 수 있음

const FormComponent = () => {
  const inputEl = useRef(null);

  return (
    <>
      <input type="text" ref={inputEl} />
      <button onClick={() => console.log(inputEl.current.value)}>클릭!</button>
    </>
  );
};

 

📍제어 input element 예시

- 현재 값, 값을 제어할 수 있는 콜백 함수를 props로 전달받음 (부모로부터)

- 비제어 컴포넌트보다 더 "React"스러운 방식 (항상 사용해야하는 것은 아님)

- Form 컴포넌트에 값을 "push" 하는 방식 (Form 컴포넌트가 항상 최신 값을 가짐)

- 이는 상태와 UI(input)가 항상 일치하는 것을 의미

=> validation이나 input이 비었을 때 button element를 비활성화할 수 있음

const FormComponent = () => {
  const [inputValue, setInputValue] = useState("");
  
  return (
    <>
      <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      <button onClick={() => console.log(inputValue)}>클릭!</button>
    </>
  );
};

 

📍결론: element를 controlled 하게 만드는 것

✅props를 통해 값을 설정하면 제어 컴포넌트(엘리먼트)라고 할 수 있다

- input element의 다른 예시

 

- 장점과 단점

 

📍참고

https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

Sharing State Between Components – React

 

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/