개발하는데 다 이유가 있겠지

제어 컴포넌트(Controlled Component)는 리액트 상태(state)를 이용해 입력값을 제어하는 컴포넌트를 말합니다.

입력 요소의 값(value)를 리액트의 상태와 동기화하고, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 이벤트를 감지해 setter 함수로 state를 업데이트합니다. (useState Hooks)

제어 컴포넌트의 장점은 입력값과 UI가 항상 일치하도록 유지하여 데이터 관리를 용이하게 하고, 입력 값을 유효성을 검사하고, 복잡한 폼을 효과적으로 관리할 수 있습니다.

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return   
 (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>입력 값: {value}</p>
    </div>
  );
}

---

비제어 컴포넌트(Uncotrolled Component)는 리액트의 상태가 아닌, DOM 자체가 입력값을 제어하는 방식입니다.

입력 요소의 값은 DOM에서 직접 관리되며, 리액트는 이를 관리하지 않고 ref를 사용하여 DOM 요소에 직접 접근해 값을 읽어오거나 조작할 수 있습니다.

input과 관련된 ref는 useRef를 사용해 생성된 참조 객체로, 입력값을 직접 접근하고 조작할 수 있습니다.

비제어 컴포넌트는 DOM 요소에 직접 접근할 수 있기 때문에 입력값 초기화, 포커스 설정, 외부 라이브러리 연동 등에 사용할 수 있습니다.

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>입력창에 포커스</button>
    </div>
  );
}

---

useState와 useRef의 차이점?

useState와 useRef의 가장 큰 차이점은 렌더링에 미치는 영향입니다.

useState는 컴포넌트의 상태를 관리하며, 상태가 변경될 때마다 컴포넌트가 리렌더링되어 UI가 업데이트됩니다.

반면, useRef는 DOM 요소에 대한 참조를 저장하며, 값을 변경하더라도 컴포넌트는 리렌더링되지 않습니다.

---

어느 상황에서 어떤 방법을 사용해야 할까요?

useState는 입력값 관리, 토글 상태 등 UI를 동적으로 변경해야 할 때 사용하고, useRef는 DOM 요소에 포커스를 맞추거나, 스크롤 위치를 조절하는 등 렌더링과 상관없이 DOM을 직접 조작해야 할 때 사용합니다.

예를 들어, 입력창의 값을 실시간으로 보여주는 기능을 구현할 때는 useState를 사용하여 입력값을 관리하고, 입력창에 포커스를 자동으로 맞추는 기능을 구현할 때는 useRef를 사용하여 input 요소에 대한 참조를 얻어 focus() 메서드를 호출합니다.