[React] Styled Component에서 props로 공통 스타일 정의하기

 

스타일드 컴포넌트에서 공통 스타일을 공유하지만 일부만 다른 컴포넌트들을 만들 때, 중복된 코드가 발생하지 않게 하는 법을 알아보자

 

위 두 버튼은 배경 색만 다르고 다른 스타일은 모두 같다.

backgroundColor만 다르게 주고 나머지를 복붙할 수도 있겠지만 코드가 지저분해지니 버튼을 위한 스타일링을 하고, backgroundColor만 props로 따로 입력받아주겠다.

 

interface ActionBtnProps {
  backgroundColor: string;
}

export const ActionBtn = styled.button<ActionBtnProps>`
  width: 124px;
  height: 60px;
  color: #fff;
  border: none;
  font-size: 24px;
  font-family: Suite;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    opacity: 0.7;
  }
  background-color: ${(props) => props.backgroundColor};
`;

Props를 정의하고, styled.어쩌구<Props>의 형태로 정의해줄 수 있다.

props로 받은 backgroundColor을 css속성 background-color에 할당해주면, 나머지 스타일은 재사용하면서 배경색만 바꿔줄 수 있다.

 

적용하기

<ActionBtn backgroundColor="#C15555">취소</ActionBtn>
<ActionBtn onClick={onNext} backgroundColor="#5574C1">수납</ActionBtn>

정의한 ActionBtn 컴포넌트를 가져와 backgroundColor에 원하는 색상을 넣어주면 끝

 

근데 생각해보니 이 프로젝트에서 쓰일 버튼은 빨강 파랑 두개밖에 없는지라 그냥 깡으로 두개 만드는 게 더 편할지도 모르겠다... 일일이 색상 치는 것도 일인데 ㅎ

다양한 색상(아님 다른 스타일 속성)을 쓸 경우 유용할 것 같다.