react 로 form 을 만들어 사용하는 일은 생각보다 많은 걸 해야한다.
onSubmit
에 이벤트를 잡아서event.target.fieldName.value
로 하나씩 체크를 해서 validating 을 하다가- 귀찮아질 때 쯤 function 을 만들어서 관리를 하고
- 자주 사용하는 form input 을 컴포넌트로 만들며
- form 에 초기값을 넣어줘야할 경우 (edit 페이지 같은) 값을 가져와 하나하나 바인딩하고
- input 에 값이 바뀌었는지에 따라 submit 버튼을 활성, 비활성화 하는 로직도 있어야한다
번거로운 일을 하는 것 보다 redux-form 라이브러리를 사용해보자 검색시에 나오는 포스트들은 아주 기본적인 예제 밖에 없어서 문서를 매번 헤집는 시간이 필요했다.
먼저 이 라이브러리를 쓰기 위해선 다음 사전 지식이 필요하다
$ yarn add redux-form
redux-form 의 리듀서를 연결시켜줘야한다
rootReducer
import { reducer as formReducer } from "redux-form";
const rootReducer = combineReducers({
// form 키를 사용해야한다
form: formReducer,
});
export default rootRecuder;
사용
redux-form component 와 redux-form 이 들어갈 compoent 를 만들어야한다 편의상 Login component와 LoginForm component라고 하자
Login
import React, { Component } from "react";
import { connect } from "react-redux";
import LoginForm from "LoginForm";
class Login extends Component {
submitLoginForm = (formData) => {
console.log("LoginFormData => ", formData);
// this.props.loginAuth(formData)
};
render() {
return <LoginForm onSubmit={this.submitLoginForm} />;
}
}
export default connect()(Login);