제어컴포넌트란 ?

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState에 의해 업데이트된다.

이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트(controlled component)라고 한다.

• 제어컴포넌트의 예시

const [user, setUser] = useState({ name: "", passward: "" });

const onChange = (e: any) => {
    const { value, name } = e.target;
    setUser({
      ...user,
      [name]: value,
    });
  };

<CustomInput type="text" placeholder="test" name="name" onChnage={onChange} value="name"/>
<CustomInput type="text" placeholder="test" name="password" onChnage={onChange} value="password"/>

값이 실시간으로 변경되는 것을 볼 수 있음.

비제어컴포넌트란 ?

비제어컴포넌트는 setState에 의해 업데이트하지않고 Ref를 통해 값을 얻어온다.

• 비제어 컴포넌트의 예시

const [user, setUser] = useState({
    name: "",
    passward: "",
  });

const submit = () => {
    setUser({
      name: nameRef.current?.value || "",
      passward: passwardRef.current?.value || "",
    });
    console.log("submit !");
  };

const nameRef = useRef<HTMLInputElement>(null);
const passwardRef = useRef<HTMLInputElement>(null);

<CustomInput type="text" placeholder="test" name="name" ref={nameRef} />
<CustomInput type="text" placeholder="test" name="passward" ref={passwardRef} />
<button type="submit" onClick={submit}> 전송 </button>

값이 submit이벤트를 통해 바뀌는 것을 볼 수 있다.

useRef가 리렌더링이 되지 않는 이유 ?

• useRef훅은 React에서 리렌더링을 발생시키지 않고 유지되는 변경 가능한 참조(reference)를 생성하는 데 사용된다. useState와 달리 ref 객체를 업데이트하더라도 컴포넌트를 다시 렌더링하지 않는다.
• useRef의 주요 목적은 DOM 요소나 다른 값들을 관리하고, 이들이 렌더링 간에 지속되어야 할 때 사용한다.
• useRef가 리렌더링을 발생시키지 않는 이유는 해당 값이 컴포넌트의 상태(state) 일부가 아니기 때문이다.
• ref의 값을 업데이트할 때, React는 이를 상태 변경으로 간주하지 않으며, 따라서 리렌더링을 발생시키지 않는다.