React에서 Form 이해하기

사용자는 form을 통해 웹 앱과 상호작용합니다. 로그인, 검색, 문의 페이지 등에서 form을 사용합니다. React는 state를 통해 이러한 데이터를 관리하는 과정을 단순화합니다.

Controlled Components

React에서는 주로 controlled components를 사용합니다. 이는 React state가 input 값을 관리한다는 것을 의미합니다.

작동 방식: • value prop이 input을 state에 연결합니다. • onChange 이벤트가 사용자가 입력할 때마다 state를 업데이트합니다. • React가 단일 진실 공급원(single source of truth) 역할을 합니다.

프로세스는 다음과 같은 흐름을 따릅니다: 사용자 입력 → onChange 이벤트 → State 업데이트 → Re-render → 업데이트된 UI

여러 필드 관리하기

모든 input마다 별도의 state를 만들 필요는 없습니다. 하나의 object를 사용하여 모든 데이터를 저장할 수 있습니다.

다음 패턴을 사용하세요: • 전체 form을 위한 단일 state object를 사용합니다. • input에 name 속성을 사용합니다. • state를 업데이트하기 위한 하나의 handleChange 함수를 만듭니다.

[e.target.name]: e.target.value 구문은 변경을 일으킨 특정 필드를 업데이트합니다. 이를 통해 코드를 깔끔하게 유지할 수 있습니다.

제출(Submission) 처리하기

사용자가 form을 제출하면 브라우저는 기본적으로 페이지를 새로고침합니다. 이는 앱의 동작을 방해합니다.

onSubmit 함수 내부에서 e.preventDefault()를 사용하세요. 이렇게 하면 새로고침을 방지하고 React가 데이터를 처리할 수 있게 합니다.

특수 Input 타입

입력 타입에 따라 필요한 속성이 다릅니다: • Text input은 e.target.value를 사용합니다. • Checkbox는 e.target.checked를 사용합니다. • Select 메뉴는 value prop을 사용하여 선택된 옵션을 추적합니다.

유효성 검사(Validation) 팁

데이터를 제출하기 전에 항상 유효성을 검사하세요. 다음 사항을 확인합니다: • 필수 입력 필드. • 올바른 이메일 형식. • 최소 비밀번호 길이.

React Form을 위한 베스트 프랙티스

이러한 단계들을 숙달하면 전문적인 웹 애플리케이션을 구축하는 데 도움이 됩니다.

출처: https://dev.to/aj_arul/understanding-forms-in-react-19gj