[React] Styled Component 활용해서 컴포넌트 재사용 한 후기

 

🤩 React Styled Component를 활용한 컴포넌트 재사용

1. 시작하기에 앞서서 재사용 컴포넌트란 정의가 무엇일까요 ?? 

말 그대로 컴포넌트를 다시 사용한다는 개념 이라고 보시면 됩니다. 

컴포넌트를 재사용 한다는 것은 ?

 

1. 중복을 제거해준다.

2. 좀 더 깔끔한 코드 사용이 가능하게 해준다.

 

위와 같은 장점이 있지만 , 저는 그동안 재사용 컴포넌트를 사용하지 않고 있었습니다. 

2. 그동안 나는 어떻게 코드를 짰나 ??

사실 재사용컴포넌트를 사용해라 ! 라는 말은 블로그나 , 유튜브 영상 등을 통해서 충분히 인지하고 있었지만 , 

평소에 제가 짜는 코드는 재사용 컴포넌트를 고려하지 않고 코드를 짜고 있었습니다. 

 

머리속으로 인지는 하고 있지만 , 막상 코드를 짜면 이곳 저곳 중복이 발생하고 , 앞으로 똑같이 비슷한 컴포넌트가 나와도 다시 CSS 코드를 짜고 있는 제 자신을 볼 수 있었습니다. 

비슷하지만 중복이 일어난 버튼

근데 한 두번이 아니라 세번 네번 똑같은 코드를 치다보니까 이런 생각이 들었습니다. 

어 ? 이거 똑같은 전에 짠 거랑 디자인도 그렇고 비슷한거 같은데...? 

그러면 따로 컴포넌트로 빼서 색깔이랑 크기 , 이런 것들만 따로 넘겨서 계속 쓸 순 없을까 ? 라고 생각을 하게 되었고 

그동안 봤던 , 블로그나 , 유튜브 지식들이 모아져서 직접 만들어 보기로 했습니다.

 

재사용 컴포넌트 만들기 

일단 버튼들을 보면서 생각한게 세로 , 가로 , 배경색 , 글자색 , 글씨 크기 , 이 정도만 커스텀 할 수 있어도 중복이 방지되겠다는 느낌이 들었습니다.  그러면 일단 버튼 컴포넌트를 하나 새로 만들고 , 타입스크립트라면 Props로 무엇을 받을 지 정의를 해줍니다.

interface에 ? 를 사용하는 이유는 컴포넌트를 재사용 할 때 widht나 height 같은 속성값들을 안 줄 수 도있는데 그때 ? 가 없으면 오류가 발생하기 때문입니다 ! 

interface PropsType {
  width?: string;
  height?: string;
  bgColor?: string;
  color?: string;
  fontSize?: number;
  children?: string;
  weight?: string;
  onClick?: () => void;
}

그리고 CustomButton 이라는 컴포넌트를 만들고 안에서 스타일 컴포넌트를 사용해서 Button을 리턴을 해줍니다.

function CustomButton(props: PropsType) {
  return <Button {...props}>{props.children}</Button>;
}

export default CustomButton;

이렇게 되면 버튼 이름을 아래와 같이 주면 그 버튼이름이 {props.chidren} 으로 들어가서 이름에 딱 맞게 됩니다 ! 

<CustomButton>버튼이름</CustomButton>

그리고 {...props} 부분은 저희가 props로 받은 속성들을 스타일드 컴포넌트에 넘겨주는 역할을 해줍니다.  

Button StyledComponent 부분 

const Button = styled.button<PropsType>`
  border: none;
  margin: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  font-weight: ${(props) => (props.weight ? props.weight : '400')};
  width: ${(props) => (props.width ? props.width : '12rem')};
  height: ${(props) => (props.height ? props.height : '6rem')};
  font-size: ${(props) => (props.fontSize ? props.fontSize : '1.5rem')};
  background-color: ${(props) => (props.bgColor ? props.bgColor : 'white')};
  color: ${(props) => (props.color ? props.color : 'black')};

  &:hover {
    transform: scale(0.98);
  }
`;

만약 타입스크립트를 사용하신다면 styled.button<Type넣어주세요!> 저희가 위에서 정의했던 interface 타입을 넣어주시면 됩니다 ! 

그리고  스타일 컴포넌트로 넘어온 props 속성들이 props에 담겨있습니다. 

그 props를 삼항 연산자를 사용해서 만약 props.속성값 이 있으면 배경색 노랑색 , 없으면 파랑색 이런식으로 속성값을 지정해 줄 수 있습니다. 

 

그러면 위 코드를 이용한 예시코드를 보여드리겠습니다 !! 

<CustomButton
      height="4rem"
      bgColor="#5de0e6"
      color="white"
      width="18rem"
      weight="bold"
 >
  Login
</CustomButton>

이런식으로 속성값을 주고 , 그안에 chidren 값을 주면 다른 코드에서도 계속 사용이 가능한 재사용 컴포넌트를 만들 수 있습니다 ! 

 

🚀 결과 ! 

이번에 커스텀 컴포넌트를 만들어 보니까 어떤식으로 만들어야 하는지 감이 잡힌거 같고 , 

앞으로 무작정 CSS로 찍어내는게 아니라 내가 만드는 컴포넌트가 미래에 또 쓰일 가능성이 있는지 ? 아니면 다른 추가적으로 확장이 가능한지 ? 생각을 한번 더 해보는 계기가 된 것 같습니다 !