[React/리액트]styled-component에서 공통된 css 처리하기

서로 다른 태그에 공통된 css 속성 적용하기

기존 스타일 코드의 일부이다. 각 브라우저마다 backdrop-filter를 설정해주었는데, 해당 코드가 중복되어 나타나고 있다. 

코드도 길고 너무 지저분하니 하나의 변수로 묶어버린다. 

 

방법은 간단하다. 중복되는 부분을 하나의 css 속성 변수로 생성해준다. 

 

이후 사용하고 싶은 부분에서 템플릿 리터럴로 작성해주면 된다 ! 

 

훨씬 간소해졌다. 

위 코드에서는 또 다시 중복된 부분들이 보인다. 

각 태그의 종류가 다르므로, 역시 위와 같은 방법으로 중복된 코드를 줄일 수 있다. 

 

길었던 코드를 짧게 만들었다 ! 

가독성도 훨씬 좋아졌고, 추후 유지보수에도 용이할 것 같다. 

 

동일한 태그에 공통된 css 속성 적용하기 

먼저 기본이 될 컴포넌트의 스타일 코드를 작성한다. 

import styled from 'styled-components';

export const Btn = styled.button`
  background-color: #12ae21;
  border-radius: 3rem;
`;

 

이후 styled 함수의 param으로 기본 스타일 컴포넌트를 작성한다. 

export const LargeBtn = styled(Btn)`
  width: 10rem;
  height: 10rem;
`;

 

<>
  <S.Btn>	
  	버튼
  </S.Btn>
  <S.LargeBtn>
    큰 버튼
  </S.LargeBtn>
</>

 

Btn 컴포넌트를 기본으로 하여 배경색과 border는 동일하게 적용되었다. 

변화를 주고 싶은 부분인 width와 height 값만 설정하여 기본 값은 유지한 채로 컴포넌트에 변형을 주었다. 

 

주의할점

 1. css 함수의 경우 추가로 import 해서 사용해야 한다 !

import styled, { css } from 'styled-components';

 

2. 공통된 부분으로 만들 경우, 해당 코드가 정말 효율적으로 적용될 지 한 번 더 생각해보자

width나 height 값, margin 과 padding 값 등 수정이 빈번한 코드들의 경우는 따로 관리하는 것이 더 효율적일 수 있다.