⛓ Controlled & Uncontrolled Components 비교

[wmakerjun]

Controlled Component (제어 컴포넌트)

장점

단점

Uncontrolled Component (비제어 컴포넌트)

장점

단점

---

	Controlled	Uncontrolled
지향점
사용성
성능
포맷팅
동적 핸들링
관찰

[365kim]

🙋🏻‍♀️ 신세한탄(@shinsehantan)
🙋🏻‍♀️ 하루(@365kim)

제어 컴포넌트

• 장점 👍
  • 상태와 값이 항상 일치한다! (단일 진실 공급원)
  • 실시간 validation을 할 수 있다.
  • 사용자가 유효하지 않은 값을 입력했을 때, 화면에 표시하지 않음으로써 사용자 경험을 개선할 수 있다.
• 단점 👎
  • input 이벤트가 발생할 때마다 상태 값을 업데이트 해주고, input의 value 값도 계속해서 갱신 해주어야 한다.

비제어 컴포넌트

• 장점 👍
  • 필요할 때만 값을 가져다가 쓸 수 있어서 코드량이 적고 편하다(?).
• 단점 👎
  • 사용자가 유효하지 않은 값을 입력하더라도 화면에 그대로 표시되어 사용자가 틀린 입력 값을 제출할 가능성이 더 높다.
  • 보여주고 싶은 대로 포맷팅할 수 없다.

[Puterism]

🤖 제어 컴포넌트

• Form 컴포넌트의 입력값을 상태로 제어합니다.
• 입력되는 값을 바라보다가 원하는 형태로 포맷팅할 수 있습니다.
• 입력될 때마다 상태가 변경되면서 re-render되기 때문에, render해야하는 요소가 많다면, 눈에 보이도록 성능이 떨어지는 이슈가 있을 수 있습니다.

😃 비제어 컴포넌트

• Form 컴포넌트의 입력값을 상태로 제어하지 않습니다.
• 값이 입력되더라도 스크립트를 걸어놓은 것이 없다면, 성능상으로 큰 문제가 없습니다.
• 입력된 값을 사용할 때만 DOM 접근을 통해 value값을 가져옵니다.

개인적인 생각

• 제어 컴포넌트와 비제어 컴포넌트의 이점을 상황에 따라서 취하는 것이 좋다고 생각합니다.
• 하지만, 하나의 폼에서 제어 컴포넌트와 비제어 컴포넌트가 섞여서 각각 다르게 관리되고 있다면, 코드의 흐름을 읽기 어려워지기 때문에 통일하는 것이 좋다고 생각합니다.
• 아예 Formik이나 react-hook-form과 같은 라이브러리에게 폼 데이터 관리를 일임하는 것도 좋은 방법이라고 생각합니다.