폼 제어 / 비제어 컴포넌트

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다.
// 리액트 문서

제어 컴포넌트 (Controlled Component)

HTML에서 input, submit, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.

간단하게 '제어 컴포넌트'는 React에 의해 값이 제어되는 입력 폼 엘리먼트라고 합니다.

 

import React, { useState } from 'react'

export default function App() {
    const [plus, setPlus] = useState(0)
    const [text, setText] = useState("")
    
    const plusButton = () => {
        setPlus(plus + 1)
    }
    //plus 넣어 랜더링
    
    const inputValue = (e) => {
    	e.preventDefault();
        setText(e.target.value)
    
    return (
    	<>
            <h1>{plus}</h1>
            <button onClick={plusButton}>+1</button>
            <form>
                <label>Input : </label>
                <input
                  type="text"
                  name="inputValues"
                  onChange={inputValue}
                  value={text}
                />
            </form>
        </>
    );
}

대부분의 경우 폼을 구현하는데 제어 컴포넌트로 사용하는 것이 좋습니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다. 이에 대안인 비제어 컴포넌트 DOM 자체에서 폼 데이터가 다루어집니다.

 

비제어 컴포넌트

import React, { useRef } from "react";

// ref를 활용 -> 비제어 컴포넌트 방식으로 Form을 다뤄보자
export default function UnControlledForm() {
	const inputRef = useRef();
	// const handleChange = (e) => {
	// 	console.log(e.target.value);
	// };

	const handleSubmit = (e) => {
		e.preventDefault();
		alert(inputRef.current.value);
		inputRef.current.focus();
	};

	return (
		<form onSubmit={handleSubmit}>
			<label>닉네임 :</label>
			<input
				type="text"
				name="nickname"
				// onChange={handleChange}
				ref={inputRef}
			/>
			<input type="submit" value="제출" />
		</form>
	);
}

Ref를 사용해야 할 때는 일종의 포커스, 텍스트 선택영역, 미디어의 재상관리의 애니메이션을 직접적으로 실행할 때 사용합니다. 서드 파티 DOM 라이브러리를 React와 같이 사용할때 Ref를 남용하면 안됩니다.

 

현재 ref의 값을 알고 싶을때는 ref.current를 사용합니다.

forwardRef => 자식 컴포넌트의 DOM ref을 알고 싶을때 그러나 변경된 값은 자식 컴포넌트에서만 유효하고 부모컴포넌트에서는 알지 못한다. 권장하는 방법은 아니지만 가끔가다 자식 컴포넌트의 DOM 노드를 포커스하는 일이나, 크기 또는 위치를 계산하는 일 등에 대해 효과적일 수 있습니다.

 

useRef => .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.
ref 속성보다 useRef() 가 더 유용합니다. 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.

useRef 가 순수 자바스크립트 객체를 생성하기 때문, useRef는 매번 랜더링 할 때 동일한 ref 객체를 제공합니다
useRef는 내용이 변경될 때 그것을 알려주지는 않습니다.

.current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다.
하지만 setstate에 의해 리렌더링이 된다면 ref.current의 값은 변경됩니다.

React가 DOM 노드에 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요