분류 Reactjs

폼에서 재사용 가능한 React 컴포넌트 시연

컨텐츠 정보

  • 조회 290 (작성일 )

본문

컴포넌트는 React 애플리케이션의 빌딩 블록입니다. 컴포넌트를 사용하지 않고 React 애플리케이션을 빌드 하는 것은 거의 불가능합니다. 

일부 타사 패키지는 기능을 응용 프로그램에 통합하는 데 사용할 수 있는 구성 요소를 제공한다는 점까지 널리 퍼져 있습니다.


이러한 타사 구성 요소는 재사용 가능한 경향이 있습니다. 응용 프로그램에서 구성 요소와 구성 요소의 차이점은 특정 성과 관련이 있습니다.


여기 내가 의미하는 바가 있습니다. 폴로 셔츠를 판매하는 회사를 운영한다고 가정 해보십시오. 당신이 할 수 있는 두 가지가 있습니다 :

  1. 이미 디자인 된 폴로를 만들거나
  2. 구매자가 원하는 디자인을 선택하도록 할 수 있습니다.

모든 폴로가 반팔 되어야 하는 것처럼 일부 기본 사항은 일관됩니다. 그러나 사용자는 색상 및 크기와 같은 다양한 셔츠를 선택할 수 있습니다. 이 경우 짧은 소매 폴로는 좋은 React 구성 요소가 됩니다. 변형이 다른 동일한 항목입니다.


이제 로그인 양식을 작성한다고 가정하겠습니다. 폴로 셔츠와 마찬가지로 양식은 일관된 특성을 갖지만 크기 및 색상 변형 대신 입력 필드, 제출 버튼, 암호 손실 링크를 살펴볼 것입니다. 이것은 입력, 버튼, 링크 등의 변형으로 구성 및 구현 될 수 있습니다.


입력 요소 예 


양식의 입력 필드를 만드는 관점에서 살펴 보겠습니다. 다음은 일반적인 텍스트 입력이 React 구성 요소처럼 보이는 방법입니다.


class Form extends React.Component { this.state = { username: '' } handleChange = (event) => { this.setSate({ username: event.target.value }) } render() { return ( <input name="username" type={type} placeholder="Enter username" onChange={this.handleChange} value={this.state.username} /> ) } } 


이 입력 요소를 다른 장소와 프로젝트에서 재사용 할 수 있게 하려면 자체 입력 요소에서 추출해야 합니다. 그것을 FormInput이라고 하겠습니다.


const FormInput = ({ name, type, placeholder, onChange, className, value, error, children, label, ...props }) => { return ( <React.Fragment> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} placeholder={placeholder} onChange={onChange} value={value} className={className} style={error && {border: 'solid 1px red'}} /> { error && <p>{ error }</p>} </React.Fragment> ) } FormInput.defaultProps = { type: "text", className: "" } FormInput.propTypes = { name: PropTypes.string.isRequired, type: PropTypes.string, placeholder: PropTypes.string.isRequired, type: PropTypes.oneOf(['text', 'number', 'password']), className: PropTypes.string, value: PropTypes.any, onChange: PropTypes.func.isRequired } 


구성 요소는 자리 표시 자, 값 및 이름을 포함하여 유효한 마크업으로 입력해야 하는 속성과 같은 특정 props을 허용합니다. 렌더링 함수에서 입력 요소를 설정하여 속성 값을 컴포넌트에 전달되는 props으로 설정합니다. 입력 내용을 레이블에 바인딩 하여 항상 함께 유지되도록 합니다. 미리 정의하여 가정을 하고 있지 않음을 알 수 있습니다. 아이디어는 구성 요소를 가능한 한 많은 시나리오에서 사용할 수 있도록 하는 것입니다.


이는 모든 구성 요소가 매우 복잡한 기능 일 필요는 없음을 보여주는 우수한 마크업 (Brad Frost가 벙어리 리액트라고 부름)을 시행하기 때문에 좋은 구성 요소를 만듭니다. 다시 한 번, 매우 기본적인 것에 대해 이야기하고 있다면 정적 제목이라고 말하면 React 컴포넌트에 도달하는 것은 너무 과도 할 수 있습니다. 재사용 가능한 구성 요소를 만들기 위한 가능한 척도는 응용 프로그램의 다른 부분에서 동일한 기능이 필요할 때 필요할 것입니다. 해당 구성 요소가 한 번만 사용되는 경우 일반적으로 "재사용 가능한"구성 요소가 필요하지 않습니다.


다른 컴포넌트인 LoginPage에서 입력 컴포넌트를 사용할 수 있습니다.


class LoginPage extends React.Component { state = { user: { username: "", password: "" }, errors: {}, submitted: false }; handleChange = event => { const { user } = this.state; user[event.target.name] = event.target.value; this.setState({ user }); }; onSubmit = () => { const { user: { username, password } } = this.state; let err = {}; if (!username) { err.username = "Enter your username!"; } if (password.length < 8) { err.password = "Password must be at least 8 characters!"; } this.setState({ errors: err }, () => { if (Object.getOwnPropertyNames(this.state.errors).length === 0) { this.setState({ submitted: true }); } }); }; render() { const { submitted, errors, user: { username, password } } = this.state; return ( <React.Fragment> {submitted ? ( <p>Welcome onboard, {username}!</p> ) : ( <React.Fragment> <h3>Login!</h3> <FormInput label="Username" name="username" type="text" value={username} onChange={this.handleChange} placeholder="Enter username..." error={errors.username} required className="input" /> <FormInput label="Password" name="password" type="password" value={password} onChange={this.handleChange} placeholder="Enter password..." error={errors.password} className="input" required /> <Button type="submit" label="Submit" className="button" handleClick={this.onSubmit} /> </React.Fragment> )} </React.Fragment> ); } } 


LoginPage가 FormInput을 두 번 사용하는 방법을 참조하십시오. 우리는 사용자 이름의 텍스트 입력과 암호의 다른 텍스트 입력으로 모두 사용하고 있습니다. 입력 기능을 변경하려는 경우, 작성한 FormInput 구성 요소 파일에서 변경을 수행 할 수 있으며 입력 구성 요소가 사용되는 모든 인스턴스에 적용됩니다. 이는 재사용 가능한 구성 요소를 갖추는 데있어 근본적인 장점입니다. 반복하지 않아도 됩니다.


오류도 FormInput 구성 요소에서 표시됩니다.


onSubmit 함수는 먼저 양식에서 얻은 사용자 객체의 유효성을 검사하여 username에 대한 값이 있는 구조에 맞는지 확인합니다. 비밀번호에 8 자 이상이 포함되어 있는지 확인한 것처럼 입력 기능을 확장 할 수도 있습니다.


코드를 보면 거기에 Button 구성 요소가 있는 것을 볼 수 있습니다. 이는 HTML <button> 요소와 동일하지 않지만 원하는 단추 유형 (제출, 재설정, 단추), 클래스 이름, 클릭시 수행 할 작업 및 레이블을 정의하는 소품을 가져 오는 다른 구성 요소입니다. 필요한 표준을 적용하기 위해 통합 할 수 있는 다른 버튼 속성이 많이 있습니다.


const Button = (props) => ( <button type={props.type} className={props.className} onClick={props.handleClick} > {props.label} </button> ) 


다음은 모든 구성 요소가 결합 된 최종 로그인 양식입니다.


https://codepen.io/kinsomicrote/pen/zYOdedX 


이것을 직접 시도하고 싶습니까? 재사용 가능한 <select> 요소에 대해 작업하십시오. 너무 어려운 경우 <textarea> 요소로 시작한 다음 <select>로 이동하기 전에 확인란을 선택하십시오. 핵심 아이디어는 그것을 일반화하는 것입니다. 무슨 일이 있었는지 보고 싶습니다. 댓글 섹션에서 작업을 연결하십시오!