styled-components

react ui라이브러리중 js파일 내에서 css를 작성할 수 있고 전역으로 중첩되지 않게 한다. 현재 리액트의 css-in-js 라이브러리 중 인기가 제일 많다고 한다.

ex)

import styled from 'styled-components';
let Btn = styled.button`
    background : ${props => props.bg};
    color : ${props => props.bg == 'orange' ? '#000' : '#fff'};
    padding : 10px;
    outline : none;
    border : none;
`
function Detail(props) {
	return(
    	<Btn bg='orange'>스타일드 컴포넌트1 </Btn>
      	<Btn bg='orange'>스타일드 컴포넌트2 </Btn>
    )
}

컴포넌트를 만들드시 Btn이라는 변수를 만들어 스타일드컴포넌트를 담았다.

기본 구조는 styled.(HTML TAG)을 하고 백틱으로 감싸서 css를 작성하면 된다.

props를 사용해서도 속성을 변경할 수 있다.

styled-components의 장단점

장점

1. css가 전역으로 중첩되지 않는다.

만약 리액트에서 기본으로 사용하는 App.css에서 스타일을 적용하면 컴포넌트를 모아둔 js파일들 에서도 동일하게 적용된다.
반면 styld-components는 선언한 js파일 내에서만 적용된다.

2.페이지 로딩시간을 단축 시킨다.

styled-components에서 작성한 css 코드는 css파일을 별도로 만들지 않고 바로 html에 style태그로 주입시켜 적용 시키기 때문에 로딩이 더 빠를 수 있다.

단점

1.html코드가 많아지면 style도 많아지기때문에 js파일이 복잡해진다.

css에 비해 js파일에서 스타일을 적용 시키는것이 코드상 길어진다.

2. 스타일드컴포넌트인지 일반컴포넌트인지 구분하기가 어려워진다.

컴포넌트를 사용할때의 모습은 둘 다 같기때문에 무슨형식의 컴포넌트인지 구분이 어렵다.

3 다른 js파일에서 재사용 하고싶으면 export 해야한다.

굳이 다른 js파일에서 재사용을 하고 싶은경우 export해줘야 하는 단점이 있다. 이럴 경우라면 css랑 별반 차이없는데 js파일이 지저분해지는걸 감안하고 사용하는게 맞는걸까?

CSS Module

styled-components를 사용 하지 않아도 전역으로 중첩되지 않게 할 수 있는 CSS Module이다.

사용법은 간단하다.

만약 App.js에서만 적용되는 css파일을 만들고 싶다면,
App.module.css로 생성하면 App.js에서만 적용이 된다.
App.js를 제외한 다른 js파일도 동일하다.

결론

style을 적용할때 어떤 방식으로 적용하는지는 사람마다 상황마다 다를 것 같다.
그냥App.css에서 중첩되지 않게끔 잘 구분해서 사용할 수 있을거 같지만,
협업을 해야 할 경우 협업이 잘 되는 방식으로 해야 하는게 맞다고 생각한다.