React Form(제어 컴포넌트 VS 비제어 컴포넌트)

HTML Form element 자체가 내부 상태를 가짐 => React의 다른 DOM element와 다르게 동작을 한다

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

• 위 form은 제출하는 순간 새로운 page로 이동하는 기본 HTML form 동작을 수행함 => React에서도 동일한 목적으로 사용할 경우 그냥 쓰면 됨 => 하지만, 보통 제출한 후 사용자가 입력한 데이터에 접근하는 것을 목적으로 하기 때문에 표준 방식인 제어 컴포넌트(controlled components)를 사용해야 함

제어 컴포넌트 (Controlled Component)

• HTML에서 input,textarea, select와 같은 Form element들은 사용자의 입력을 기반으로 state를 관리/업데이트 한다 => React state를 관리할 때 "신뢰 가능한 단일 출처"로 만들어 두 요소를 경합할 수 있음 => form 렌더링하는 React component는 form에서 발생하는 사용자 입력값을 제어한다 

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

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

• 리액트에서는 일반적으로 useState를 통해 input value를 통제하게 되면 이를 신뢰 가능한 단일 출처가 된다고 말한다 
• 즉, 사용자가 입력하는 모든 값/변경된 값이 onChange event에 반응하게 되어 지속적으로 업데이트가 되고
• value 또한 newStationName 즉 state의 값으로 설정돼 있기 때문에 input의 값은 항상 React state에 의해 결정된다!
• 나머지, textarea, select도 비슷한 동작원리로 작동한다!

 

단점?: 

• 공식문서에 따르면, 기존 리액트로 작성되지 않은 코드를 리액트로 옮길 때 일일이 form을 위와 같은 통제 방식으로 변경해야 하기에 귀찮을 수 있다고 말한다. 하지만, 추가적으로, 상태가 변경될 때마다 react는 렌더링을 진행하기 때문에 이러한 부분들 또한 고려해야 할 것이다. 

---

비제어 컴포넌트 (Uncontrolled Component)

• 위와 같은 방식의 대안으로 나온 것이 바로 비제어 컴포넌트이다. 물론 공식문서에서는 제어 컴포넌트의 사용을 추천하는듯 하다
• 비제어 컴포넌트는 DOM 자체에서 FORM 데이터가 다루어진다
• 비제어 컴포넌트에서는 모든 state에 업데이트를 하는 이벤트 헨들러를 추가하는 대신 ref를 사용해서 DOM에서 FROM 값을 가져온다.

const inputRef = useRef(); // ref 사용

const addStation = () => {
  const newStationName = inputRef.current.value;

  ...

};

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

 

장점: 

• 제어 컴포넌트에서의 단점이 보완된다고 생각하면 된다. non-react코드와 react 코드 간의 통합이 쉬워진다(state로 변경할 필요없이 즉 DOM으로 조작하는 것이 때문에) 그럼에도 공식문서에서는 제어된 컴포넌트 사용을 지향해야 한다고 말한다.....흠

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

Controlled and uncontrolled form inputs in React don't have to be complicated - Gosha Arinich

• 특정 상황에서 어떤 방식을 사용할지 고민될 때 위 레퍼런스를 참고하면 좋을듯 하다.

---

출처:

https://hjuu.tistory.com/18

제어 컴포넌트 vs 비제어 컴포넌트

(제어 컨포넌트와 비제어 컨포넌트 비교)

 

https://www.daleseo.com/react-uncontrolled-components/

React로 비제어 양식 UI를 만드는 방법 (Uncontrolled Components)

(비제어 컴포넌트에 대한 내용 정리) 

 

https://ko.reactjs.org/docs/forms.html

폼 – React

(제어 컨포넌트에 대한 내용이 정리됨!)