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

 

제어 컴포넌트와 비제어 컴포넌트
: form 구현 시 어디서 데이터를 다룰지에 따라 달라진다.

1) 제어 컴포넌트
: 인풋의 value 값을 리엑트에서 지정 

 

const [newStationName, setNewStationName] = useState('');

return(
  <form onSubmit={addStation}>
    <Input
      type="text"
      labelText="지하철 역 이름을 입력해주세요."
      value={newStationName}
      onChange={(event) => setNewStationName(event.target.value)}
    />
    <Button>추가</Button>
  </form>
);

- 리엑트에서 사용하는 값과 실제 인풋 값이 항상 일치
- 사용자 입력마다 이벤트가 발생 
- 주로 권장되는 방법 

 

2) 비제어 컴포넌트
: 인풋의 value 값을 지정하지 않음, DOM 객체에서 데이터를 핸들링 

 

- 파일을 선택하는 인풋일 때 사용

 

function FileInput({ name, value, onChange }) {
  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    onChange(name, nextValue);
  };

  return <input type="file" onChange={handleChange} />;
}

export default FileInput;

 

- 기존 바닐라 방식과 큰 차이가 없다. 
- useRef 훅 등을 통해서 직접 폼 요소에 접근 
- 경우 따라서 필요한 방법 

 

 

 

출처

 

https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점

 

https://blog.naver.com/futureds/222078018357

제어(Controlled) 컴포넌트와 비제어(Uncontrolled) 컴포넌트