Nov 2, 2021 - customized input tag

*11월2일

 

*customized input tag

-리액트에서는 스타일링이나 재사용을 목적으로 특정 기능 or 특정 태그를 컴포넌트 단위로 쪼갬. 스타일링된 input tag를 다양한 곳에서 사용하기 위해 실습해봤다.

 

1)Input이라는 명칭으로 컴포넌트 생성 후, 부모 컴포넌트에서 하기와 같이 props 값을 전달. formik에 대한 의존성을 없애기위해 필요한 formik 또한 모두 전달

 

<Input id="pwd" type="password" labelText="비밀번호" toggleVisible handleChange={formik.handleChange}
       value={formik.values.pwd} errorMsg={formik.touched.pwd && formik.errors.pwd}/>

 

2)자식 컴포넌트에서 typescript를 활용하여 props를 정의하고, 받은 props를 연결

 

export interface Props {
    type?: "text" | "password”; // 타입이 한정되어 있다면 명확하게 종류를 정의하는 것도 좋음
    placeholder?:string;
    toggleVisible?: boolean;
    errorMsg?: string | false;
    value?: string;
    handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void // 관련한 타입은 마우스오버로 확인
}

 

<StyledInput placeholder={placeholder} name={id} type={isPwdVisible ? 'text' : type} isError={!!errorMsg}
             onChange={handleChange} value={value}/> // onChange에 handleChange 바인딩

 

 

3)기본값 설정, 조건부 렌더링 등을 통해 props에 맞는 자식컴포넌트 생성

 

{labelText && <Label htmlFor={id}>{labelText}</Label>} // labelText 있는 것만 레이블 띄움~

 

Input.defaultProps = {
    toggleVisible: false,
    type:"text"
};