[React]컴포넌트 재사용성 높이기!(컴포넌트에 각각 다른 attribute 설정하기)

 

label+input을 따로 컴포넌트로 빼고 싶어서 재사용성을 고려하면서 코드를 작성하던 중 각기 다른 input의 attribute에 대해 생각을 할 수 밖에 없었다. 

input인 경우 attribute로 컨트롤을 할 수 있는데, 각 요소마다 attribute가 다르고 공통적으로 적용할 수 없을 때는 어떻게 해야할지, 컴포넌트로 따로 빼지 않고 때려박아서 컨트롤을 해야할 지, 고민하다가 뭔가 방법이 있을 것 같아 검색을 하게 되었다. 

검색을 한 결과, 객체에 원하는 값을 넣고 ... 연산자를 사용하면 해결!

 

코드로 예를 들게 되면

<Input type="text" name="title" label="제목" options={{ defaultValue: 'dd' }}></Input>
//임의로 작성함
------


const Input = ({ type, name, label, options }: { type: string; name: string; label: string; options: {} }) => {
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input type={type} name={name} {...options} />
    </div>
  );
};
export default Input;

공통으로 해당하는 값은 따로 지정해서 props로 넘기고(눈으로 보이는게 좋아서 따로 뺐다), type에 따라 변할 수 있는 값은 option이라는 객체안에 key:value형식으로 넣고, 해당 element에 중괄호 안에 ...연산자를 사용했다.

 

지금 드는 생각인데 구조분해 할당을 주로 써서 까먹었던 것이 아닐까? 편하다고 쓴건데 어쩌다보니 생각을 가두게 된 계기가 된걸수도?