리액트에서의 폼 처리
제어된 컴포넌트(Controlled Components) 사용하기
리액트에서 폼을 처리할 때, 상태(state)를 사용하여 입력 값을 제어하는 방식을 제어된 컴포넌트라고 합니다. 각 입력 필드는 리액트 상태와 연결되어 있으며, 사용자가 입력한 값은 상태에 반영됩니다. 예를 들어, input 요소의 value 속성을 상태 변수에 할당하고, onChange 이벤트를 사용하여 상태를 업데이트합니다. 이 방식은 폼 데이터와 UI 상태를 한곳에서 관리할 수 있어 예측 가능한 방식으로 작동합니다. 이를 통해 사용자가 입력한 값이 즉시 상태로 반영되어 다른 로직과 쉽게 연결할 수 있습니다.
onChange 이벤트와 상태 업데이트
입력 필드에서 사용자가 값을 변경할 때마다 onChange 이벤트가 발생합니다. 리액트에서는 이 이벤트를 활용하여 입력 값을 상태로 업데이트합니다. 예를 들어, input 요소에서 사용자가 텍스트를 입력할 때마다 onChange 핸들러가 호출되어 상태가 갱신됩니다. 이 방법을 통해 입력 필드와 상태 값이 양방향으로 연결되어, 상태에 저장된 값은 항상 화면에 반영됩니다. setState나 useState 훅을 사용하여 상태를 업데이트하고, 이를 통해 실시간으로 폼 데이터를 관리할 수 있습니다.
폼 제출 처리하기
폼 데이터를 제출하려면 onSubmit 이벤트를 처리해야 합니다. 사용자가 폼을 제출할 때, onSubmit 이벤트가 발생하며, 이를 통해 서버로 데이터를 전송하거나 다른 처리를 할 수 있습니다. 리액트에서는 기본적으로 폼 제출 시 페이지가 새로고침되는 기본 동작을 막기 위해 event.preventDefault()를 호출합니다. 이를 통해 페이지가 리로드되지 않도록 하고, AJAX 요청 등을 사용해 비동기적으로 서버와 데이터를 교환할 수 있습니다. 예를 들어, 로그인 폼 제출 시 사용자가 입력한 데이터는 상태에서 가져와서 서버에 전송할 수 있습니다.
폼 유효성 검사
리액트 폼에서는 사용자가 올바르게 데이터를 입력했는지 확인하는 유효성 검사가 중요합니다. 유효성 검사 로직을 onSubmit 핸들러 내에서 수행하거나, onChange 이벤트에서 실시간으로 확인할 수 있습니다. 예를 들어, 이메일 입력란에 유효하지 않은 이메일을 입력한 경우, 사용자에게 경고 메시지를 표시하거나 제출 버튼을 비활성화할 수 있습니다. 유효성 검사는 상태로 관리된 폼 데이터를 기준으로 수행되며, 유효성 검사가 완료된 후 서버로 데이터를 전송하거나 다른 작업을 할 수 있습니다.
비제어 컴포넌트(Uncontrolled Components)
비제어 컴포넌트는 리액트의 상태와 직접 연결되지 않은 폼 요소입니다. 즉, 폼 데이터는 DOM 자체에서 관리되며, 상태 업데이트는 필요하지 않습니다. 이 방식은 리액트의 상태 관리에 의존하지 않고, HTML의 기본 ref를 사용하여 폼 데이터를 추적합니다. 비제어 컴포넌트는 주로 간단한 폼이나 외부 라이브러리와 통합할 때 유용합니다. useRef 훅을 사용하거나, React.createRef()를 통해 참조를 만들고 폼 데이터를 가져오는 방식으로 사용됩니다.