[React] 제어 컴포넌트와 비제어 컴포넌트의 차이

---

 

 

📑 개요

제어 컴포넌트와 비제어 컴포넌트는...

정말 말 그대로 제어의 여부라! 특별할 건 없는 거 같다!

들어가보자!

 

 

 

 

---

 

 

 

 

🪛 제어 컴포넌트와 비제어 컴포넌트란?

- 제어 컴포넌트 (Controlled Components)

대부분 상태(state)에 의해 제어되며 입력 요소의 값이 변경될 때마다 상태 업데이트가 발생한다.

주로 setState()로 값을 저장하는 방식을 이야기한다.

 

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

주로 DOM에 의해 직접 제어되며 일반적으로 ref를 사용하여 DOM 요소에 직접 접근하고 입력 요소의 값을 가져오거나 변경한다.

기존의 바닐라 JS와 크게 다르지 않은 방식으로 클릭시 요소 내부의 값을 얻어온다. 따라서 setState()가 아닌 ref를 사용해서 값을 얻는다.

 

 

 

 

✋ 제어 컴포넌트와 예시

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다.

import React, { useState } from 'react';

function ControlledComponent() {
  // 상태(state) 변수를 정의합니다.
  const [value, setValue] = useState('');

  // 입력값이 변경될 때마다 호출되는 이벤트 핸들러를 정의합니다.
  const handleChange = (event) => {
    setValue(event.target.value); // 상태를 업데이트합니다.
  };

  return (
    <div>
      {/* 입력 요소에 value 속성과 onChange 이벤트 핸들러를 제공하여 제어 컴포넌트를 생성합니다. */}
      <input type="text" value={value} onChange={handleChange} />
      <p>입력된 값: {value}</p>
    </div>
  );
}

export default ControlledComponent;

 

 

- 문제점

제어 컴포넌트의 경우 입력할 때마다 렌더링이 되므로,

불필요한 리렌더링의 발생과 API 호출이 일어날 수 있다.

 

 

👌 비제어 컴포넌트와 예시

비제어 컴포넌트는 예를 들어, form에서 submit과 같은 제출 버튼이 있을 경우,

이를 클릭하면 실행되는 함수 내에서 ref를 통해 form 내 value에 접근한다.

import React, { useRef } from 'react';

function UncontrolledComponent() {
  // ref를 생성합니다.
  const inputRef = useRef(null);

  // 입력 요소의 값을 가져오기 위해 ref를 사용합니다.
  const handleSubmit = () => {
    alert('입력된 값: ' + inputRef.current.value);
  };

  return (
    <div>
      {/* ref 속성을 사용하여 ref 객체를 입력 요소에 연결합니다. */}
      <input type="text" ref={inputRef} />
      {/* 버튼 클릭 시 handleSubmit 함수를 호출하여 입력된 값 출력 */}
      <button onClick={handleSubmit}>값 확인</button>
    </div>
  );
}

export default UncontrolledComponent;

 

- 문제점

비제어 컴포넌트는 사용자가 직접 트리거 하지 않으면 리렌더링과 값 동기화가 되지 않으므로,

a와 b 컴포넌트가 실시간으로 영향을 주고 받아야 하는 상황에 적합하지 않다.

 

 

 

 

 

 

---

 

 

 

✨ 마무리

끝!

 

 

 

- 요약

제어 컴포넌트

• 상태(state)에 의해 제어되며 입력 요소의 값이 변경될 때마다 상태 업데이트가 발생한다.

비제어 컴포넌트

• DOM에 의해 직접 제어되며 일반적으로 ref를 사용하여 DOM 요소에 직접 접근하고 입력 요소의 값을 가져오거나 변경한다.

비제어 컴포넌트는 값이 실시간으로 동기화 되지 않으므로 즉각적인 영향이 필요할 때는 적절치 않다.

실시간으로 리렌더링이 필요한 경우 제어 컴포넌트의 사용이 필요하다.