[react] 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(UnControlled Component)

1. 제어 컴포넌트(Controlled Component)

 

입력 폼 엘리먼트(input, textarea, select)는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

state는 setState()에 의해 계속해서 업데이트되기 때문에 입력 폼 엘리먼트에 value에 state를 적용해주면 그 엘리먼트는 제어 컴포넌트가 된다.

제어 컴포넌트는 사용자에게 보여지는 화면과 저장된 데이터가 실시간으로 동기화된다.

실시간으로 값이 필요할때는 제어 컴포넌트를 사용하는 것이 좋다.

import { useState } from 'react';

const App = () => {
    const [name, setName] = useState('');
    
    const nameChangeHandler = e => {
    	e.preventDefault();
        setName(e.target.value);
    };
    
    return(
    	<form>
            <input 
             	type="text"
                placeholder="이름을 입력해 주세요."
                value={name}
                onChange={nameChangeHandler}
            />
            <button>Add</button>
        </form>
    );
};

export default App;

 

 

2. 비제어 컴포넌트(UnControlled Component)

 

제어 컴포넌트가 사용자가 값을 입력할 때마다 스스로 state를 업데이트했다면, 비제어 컴포넌트는 값을 입력하고 버튼을 클릭했을 때 ref를 통해 값을 얻어온다.

불필요한 리렌더링을 줄이고 최종 값만 필요할 때는 비제어 컴포넌트를 사용하는 것이 좋다.

 

Ref값은 전 생애주기를 통해 유지되기 때문에 컴포넌트가 리렌더링 되어도 계속 현재값을 유지하게 된다.

import { useRef } from 'react';

const App = () => {
    const inputRef = useRef();

    const Submit = () => {
      const name = inputRef.current.value;
    };
    
    return(
    	<form onSubmit={Submit}>
            <input 
             	type="text"
                placeholder="이름을 입력해 주세요."
                ref={inputRef}
            />
            <button>Add</button>
        </form>
    );
};

export default App;