React에서 CSS를 대신하던 SASS.
이번엔 SASS를 대체할 수 있는 기술이 또 어딘가에서 등장했다. (나한테만 새로운 등장..)
바로 Styled Component라는 라이브러리.
Styled Component는 왜 등장했고, 어떤 장단점이 있는지 살펴본다.
이제야 코드 작성에 조금이나마 익숙해지나 했는데 이게 웬걸!!
2차 프로젝트에 들어가며 또 다른 기술스택을 익히고 사용해야 하는 상황을 맞이했다. 다행히도 지금까지의 노력이 헛되지는 않아서 비교적 빠르게 익숙해지고 있기는 하지만, 새로운 개념이므로 복습을 해보자..!
What is Styled Component?
Styled Component는 기존 SASS가 가지던 문제를 해결하여 React를 조금 더 쉽게 스타일링할 수 있도록 개발된 라이브러리이다. React를 컴포넌트 단위로 분리하여 스타일링 할 수 있도록 도와주며 여러 편리한 기능을 제공한다.
How to use Styled Component?
- 기본적으로 Styled Component는 라이브러리이기 때문에 install이 필요하다.
- install이 완료된 후에는 라이브러리에서 import해온 styled라는 객체를 활용한다.
import styled from 'styled-components';- Styled Component의 특징 중 하나는 이름에서 유추할 수 있듯이, 일반 태그들도 컴포넌트와 비슷한 느낌으로 작성한다는 점이다.
<div className="detailPageWrapper" />의 형태가 아닌<DetailPageWrapper />의 형태로 작성된다는 것!
export default function DetailPage() {
return (
<DetailPageWrapper>
<ProductHead />
</DetailPageWrapper>
);
}- 그 후 Styled Component에 스타일링을 부여할 때는 Tagged Templete 문법을 활용한다. Tagged Templete는 Templete Literals 문법( 백틱 ` 과 ${} )의 확장판이라고도 볼 수 있다.
const DetailPageWrapper = styled.div`
position: relative;
width: 900px;
margin: 50px auto;
`;Pros & Cons
제한된 상황 속에서 짧게 Styled Component를 사용해보니 몇 가지 느껴지는 점이 있었다.
Pros
- 컴포넌트별 관리가 매우매우 수월
하나의 컴포넌트 내에 해당하는 css까지 한 번에 존재하기 때문에 여러 파일을 열지 않더라도 쉽게 수정 가능 & 삭제가 필요한 경우 해당 컴포넌트 파일을 삭제하는 것만으로도 해결 - javascript의 동적인 값을 디자인에 쉽게 반영할 수 있음
동일한 파일 내에 있기 때문에 props를 넘겨주는 방식으로 동적인 디자인이 수월해졌다. 이전에는 css가 별도의 파일로 분리되어 있었기 때문에, 동적인 디자인이 필요할 경우 inline으로 스타일링을 하는 것이 불가피했다. 하지만 지금은 다른 스타일링과 동일하게 처리 가능
import React from 'react';
import styled from 'styled-components';
export default function StarRating() {
return rates.map((rate, idx) => (
<React.Fragment key={idx}>
<StarRate>
<StarImg alt="star rating" src="/images/회색별들.png" />
<ColoredStarBox width={rate.ratingNum * 20}>
<StarImgColored alt="star rating" src="/images/파란별들.png" />
</ColoredStarBox>
<RatingNum>{rate.ratingNum}</RatingNum>
<Bullet>•</Bullet>
<NumOfReviews>{rate.numOfReviews}개 후기</NumOfReviews>
</StarRate>
</React.Fragment>
));
}
const ColoredStarBox = styled.div`
position: absolute;
top: 0;
width: ${props => props.width}px;
overflow: hidden;
`;위의 예시는 직접 작성한 코드 중 일부인데, html 코드 내에서 ColoredStarBox의 props로 width={rate.ratingNum * 20}을 넘겨주고 아래의 스타일링 코드에서 해당 props를 받아 width: ${props => props.width}px로 사용한 것을 볼 수 있다.
- 디자인 요소를 상속해줄 수 있음
직접 사용해본적은 없지만, 스타일드 컴포넌트도 SASS처럼 공통적인 스타일링 부분을 다른 styled component로 상속해줄 수 있다.
render(
<div>
<Button>Normal Button</Button>
<TomatoAnchorButton>Tomato Button</TomatoAnchorButton>
</div>
);
const Button = styled.div`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const TomatoAnchorButton = styled(Button)`
color: tomato;
border-color: tomato;
`;- 네스팅도 여전히 가능.
각각의 styled component는 네스팅이 불가능하나,&:hover나 컴포넌트 내에 포함된i태그 등은 네스팅이 가능하다. - Global style과 theme provider을 활용하여 전역 스타일링도 가능
단점
- 개인적으로 Semantic tag를 유지하기 어렵다
태그에 대한 내용이 스타일링쪽 코드로 넘어가 있기 때문에 html 코드만 확인해서는 각 태그가 어떤 건지 알기 쉽지 않다. 처음에 구조를 제대로 짜놓지 않으면 semantic tag를 유지하기 어려움 - 컴포넌트와 구분하기 어려움
- 이름 짓기 여전히 어려움..
그런데 styled component 공식 문서를 읽어보니, 해당 라이브러리가 가지고 있는 특성 중에 각 컴포넌트별 unique한 className을 부여해준다는 얘기가 있었다. 그렇다면 너무 고민하지 않고 작업해도 문제없을 듯!
[참고] Styled Component 공식 문서
https://styled-components.com/
아직 공식문서를 꼼꼼하게 읽어보지 못해 다양한 기능이 있지만 활용하지 못하고 있는 상태! 필요한 기능이 있을 때 하나씩이라도 검색하여 알아봐야겠다. 그래도 개발자로 보내는 시간이 조금씩 늘어가면서 공식문서로 새로운 기술 스택을 배우는 방법을 조금씩 알아가는 것 같이 기쁘다.
