useState, Form, Input - 제어컴포넌트

useState

useState를 사용하면 상태 값이 변경될 때마다 해당 컴포넌트가 리렌더링.

setState는 비동기적으로 동작할 수 있으므로, 최신 상태 값을 참조해야 할 때는 콜백 함수를 사용.

쓰는 이유

• 동적인 데이터 관리:

  • 버튼 클릭 시 텍스트가 변경되거나 리스트에 항목이 추가되는 경우 등 동적인 데이터를 처리함. 이 동적인 데이터를 효율적으로 관리하기 위해 useState를 사용.

• 자동화된 리렌더링:

  • useState를 통해 상태가 업데이트되면, 리액트는 자동으로 컴포넌트를 다시 렌더링하여 최신 상태를 반영한 UI를 화면에 보여주는데, 개발자는 이 과정에서 DOM을 직접 조작할 필요 없이, 상태만 업데이트하면 된다.

• 간결하고 직관적인 코드:

  • useState는 클래스형 컴포넌트의 상태 관리보다 더 간결하고 직관적인 코드를 작성할 수 있게 도와줌.

---

Form

<form> 태그는 사용자 입력을 수집하고, 제출하는 역할을 하는데, 일반적으로 사용자 입력을 묶어서 한 번에 처리하거나, 서버로 데이터를 전송할 때 사용.

쓰는 이유

1. 구조화된 데이터 수집:
   • <form> 태그는 여러 개의 입력 필드와 버튼을 그룹화하여 데이터 수집을 간편하게 함.

2. 엔터키로 제출 가능:
   • <form> 태그를 사용하면 사용자가 엔터키를 눌러 데이터를 쉽게 제출할 수 있다.

주의!

e.preventDefault() 로 폼 제출의 기본 이벤트를 막아주기.

form의 기본 이벤트인 새로고침을 막아야 함

---

input

input값을 제어하는 방법은 제어 컴포넌트와 비제어 컴포넌트로 나뉨.

장점

• 유효성 검사:
  • 유효성 검사가 쉬움.
  • 잘못된 데이터를 입력했을 때, 즉시 경고 메시지를 표시하거나 입력 막기 가능.

• 데이터 일관성 유지:
  • 컴포넌트의 상태와 입력 필드의 값이 항상 동기화되어 있어, 데이터를 보다 일관되게 관리 가능.

단점

• 코드 길이가 늘어난다:
  • value 와 onChange 등의 속성을 작성해야 해서 번거롭다.