[React] Styled-components 사용 왜 ?

나는 지금까지 React 개발을 하면서 스타일은 항상 Styled-components 를 사용해왔다.

이유는 딱히 없었다.  React 처음할때 사용한 css 가 저거였을 뿐.

그이후로도 쭉 React 관련 프로젝트를 할때마다 사용했고 익숙하니까 속도도 나왔다.

근데 타의로 최근 scss 를 사용하게 되었는데 익숙함에 오는 거부감인지 왠지 자꾸 단점만 찾게되고

다른사람들이 바보같아보였다. 근데 나는 저게 왜 좋은지도 모르고 쓰는건데

이번기회에 어떤점이 좋은건지. 왜 쓰는건지 알고 사용하고

더 좋은게 있다면 바꿀 수 있도록 하기위해 Styled-components 의 정리를 하려고 한다.

npm install styled-components

import styled from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`

사용방법은 굉장히 심플하다. 이런식으로 디자인 한 후 Compoents 처럼 사용하면된다.

내가 느끼기에 가장 큰 장점은 class 이름을 고민하지 않아도 된다는 점이였던것 같다.

애초에 유일한 class 명을 자동생성해서 붙여주기 때문에 중복걱정을 하지 않아도 된다.

컴포넌트도 파일위치가 다르면 명칭이 중복되도 아무상관없다.

두번째는 코드관리가 편하다.

html 코드와 style 코드를 뒤져가면서 해당 클래스를 찾아서 헷갈리며 수정할일이 줄어들었다.그래서 유지보수하기도 편하고 컴포넌트 이름으로 유추하기도 쉬웠다.세번째는 Critical CSS 지원이다.이건 체감은 잘 안됐는데 중요한 CSS 를 추출하여 빠르게 사용자들에게 콘텐츠를 렌더링 하는 기술이라고 한다.최소한의 양의 코드를 로드하기때문에 성능측면에서 우수한데이런게 중요하다는건 어디서나 항상 강조를 받고있기때문에 좋은점으로 작용할 것이다.네번째는 props 를 이용하여 동적 스타일이 가능하다는 것이다.나는 이게 참 좋았는데 props 를 이용하여 코드에 값을 넘겨줘서동적으로 스타일을 변경할 수 있기 때문에 편하기도하고 제일 좋아보이는 기능이였다.

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`

const Button2 = styled(Button)`
	// 추가적인 CSS
`

다른 디자인 프레임워크에서 가져온 걸 상속받아서 내가 커스텀 해서

사용하기에도 가장 맘에 들었던 방식이였다.

 

그냥 요즘에 React Native 를 공부하고 회사에서는 Nuxt React 이런걸 쓰고있다.

나랑 같이 공부하는 친구는 Flutter 를 공부하고있는데 나는 왜 이걸 선택했는가에 대해 고민하고

회사에서는 내가 왜 React 에서 Style 에서 Styled-components 를 쓰려고 하는지

왜 scss 보단 Styled-compontnts 가 좀 더 끌리는지 설명하려고 하니

내가 왜 쓰는지 정도는 알고 써야겠다 라는걸 느끼고 있다.

요즘 마음이 심란할수록 내가 하고있는거에 대해 정확히 알아야 겠다는 생각이 자주 든다.

그래야 남을 설득할 근거도 생기는 것같다.

GitHub - styled-components/styled-components: Visual primitives for the component age. Use the best bits of ES6 and CSS to style

추가적으로, 남들이 다 ~ 이거 쓰는덴 이유가 있다.

자주 업데이트되고, 40K stars, Used by 2.4m 이면 말 다헀지 ㅎ