[React] 실무에서 활용하는 styled-components 세부기능

Hyo Kyun Lee·2021년 12월 10일

React

목록 보기

41/41

실무에서는 styled-component도 javascript와 같은 유연한 동작이 가능하다.

반응형 동작(특정 조건에서만 CSS속성 등이 반영되도록 구성), 변수(${variables}) 등이 유연한 동작의 대표적인 예시라 할 수 있다.

이 부분은 비단 프론트엔드와 함께 백엔드까지 접목되는 개념이기 때문에, 구조를 알고 있으면 동작수행과정이나 흐름을 이해하는데 많은 도움이 될 수 있다.

@media( CSS가 적용될 특정한 조건 )

특정 조건을 만족하게 된다면 아래 동작을 수행(CSS 적용)하게 된다.

//mdn 공식문서에서 발췌한 예제
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

여기서는 max-width가 600px, 즉 전체 화면이 600px 이하일 경우 배경색이 노란색으로 바뀐다.

${variables}

정적인 변수가 아닌, props로 부터 받아온 동적인 변수를 활용하고자 할 때는 위와 같은 형태로 변수를 받아와 사용하면 된다.

예를 들어, 특정 component에서 theme이라는 props를 통해 변수를 받아왔다고 가정한다.

기존 CSS에서는 이러한 props는 물론, 변수 자체를 사용할 수가 없어서 제약사항이 많았다.
반면 styled-components에서는 props를 비구조화하여 사용할 수 있고, 내부적으로 전달한 data값을 받아올 수 있다.

@media ${({theme}) => theme.variables} {
  logic..
}

위와 같은 경우는 props의 설정에 따라 CSS구현이 달라지도록 설정한 것이다.
theme을 비구조화한 후, 특정 변수값(variables)에 따라 logic을 적용하도록 구성해주었다.

이처럼 styledcomponents의 미디어 쿼리는 함수형태로 사용해서, 해당 인자를 받아와(${theme}) 인자의 값을 활용하여 특정 조건을 설정(theme.variables)할 수 있다.