Select, Input 등 을 재사용성이 높게 만들어보자!

🗣 상황 부여

1. 현재 상황은 react-form-hook 을 사용하는 상황이다.
2. 그러므로 {...register} 을 사용해야 한다.
3. select 의 options 들은 배열로 미리 만들어 놓은 option들이다.

🗣 Select 로 예시를..

Component 부분

// src/components/Select/Select.jsx

import styled from 'styled-components';
import { GoTriangleDown } from 'react-icons/go';

function Select({
  register,
  options,
  name,
  defaultValue,
  required = 'false',
  ...otherProps
}) {
  return (
    <SelectWrapper>
      <SelectInput {...register(name, { required: required })} {...otherProps}>
        {defaultValue && (
          <option selected value="" disabled>
            {defaultValue}
          </option>
        )}
        {options?.map((value, index) => (
          <option key={value} value={index + 1}>
            {value}
          </option>
        ))}
      </SelectInput>
      <TriangleDown />
    </SelectWrapper>
  );
}

export default Select;

... style 생략

사용하는 부분

// ...import 생략
import Select from 'components/Select/Select';

const SIZE_OPTIONS = ['10평 미만', '10평대', '20평대 이상'];
const RESIDENCE_OPTIONS = ['원룸&오피스텔', '아파트', '빌라&연립'];
const STYLE_OPTIONS = ['모던', '북유럽', '빈티지'];

function MetadataForm(props) {
  const { register } = useFormContext();
  return (
    <MetadataFormDiv>
      <SelectGroup>
        <Select
          register={register}
          name="size"
          defaultValue="평수"
          options={SIZE_OPTIONS}
        />
        <Select
          register={register}
          name="residence"
          defaultValue="주거형태"
          options={RESIDENCE_OPTIONS}
        />
        <Select
          register={register}
          name="style"
          defaultValue="스타일"
          options={STYLE_OPTIONS}
        />
      </SelectGroup>
      <TitleInput
        {...register('title', { required: true })}
        placeholder="포스트제목을 입력해주세요"
      />
    </MetadataFormDiv>
  );
}

사용

1. react=hook-form 을 사용함에 있어서 기본적인 내용들을 미리 Component 파일에 만들어준다.
   (현재 validate는 필요 없어서 만들어 놓지 않음)
2. 불러오는 쪽에서 props 로 필요한 값들을 넣어주고 재사용한다.

결론

비슷한 패턴으로 반복되는 코드 뭉치 들은 구멍채우기(함수 argument같이)를 통해서 조금 더 편하게 사용하자!