[React] Styled Componets

 

 

💡초보 개발자의 프로젝트때 Styled Components 써봤던 후기

---

🔍장점

정말 편했다. 항상 css 파일에 따로 쓰다가 처음 StyledComponents를 알았을 땐 처음엔 왜 굳이 이걸 여기에 한번에 쓰지? 싶었는데 막상 써보니까 기존의 방법은 구식으로 느껴질 만큼 편했다.

 

html 출력 부분을 다루고 있다가 해당 부분 수정이  필요할 때? 컨트롤 f 로 검색하거나 컨트롤 누르고 해당 컴포넌트를 클릭하면 바로 같은 페이지의 StyleComponents 화면으로 이동이 가능했다.

 

또한 & 을 이용해서 내부의 세부적인 div 값의 스타일을 변경할 때나 아니면 hover, after 등등의 여러 효과들을 조절할 때에도 Style Components 가 훨씬 코드가 단순하게 느껴졌고 바로바로 입력할 수 있어서 편했다.

 

그리고 css 파일간의 클래스명이 겹치면 중첩되는 경우 때문에 css 파일의 클래스명의 대부분은

className ="해당 css 파일 이름 - 변수이름" 이런식으로 지어야 해서 뭔가 귀찮기도 하고 멋도 안나고 ^^

그런데 Styled-Componets 는 이러한 상황을 전혀 고려하지 않아도 돼서 편했다.

[css 도 파일이름.css 라고 지을거 파일이름.module.css 라고 지으면 관련 효과가 해당 파일에만 적용된다고 한다.]

 

 

🔍단점

내가 아는 단점. 그런데 엄청 크게느껴진 단점

바로 웹상에서 관리자 모드를 통해 html 파일을 봤을 때 해당 클래스 명이 이상하게 바뀐다는 점.

이건 정말 매우매우 불편한 단점이다. 그래서 해당 적용되는 부분을 찾으려고 컨트롤 쉬프트 c 를 눌러서

해당 부분을 클릭 했다 하더라도 해당 위치에 적용되는 코드를 찾으려면 div가 몇개 쌓여있는지 하나하나 세서

코드를 찾아봐야 했다. 

 

이 부분만 개선이 된다면 이미 좋은 기능이지만 훨씬 더 사랑 받지 않을까 싶다.

 

 

💡Styled-Components

---

Styled-Components 모듈 깔기

npm install styled-components

	or

yarn add styled-conponents

 

그리고 사용할 곳에서

이렇게 임포트 해주면 된다.

 

 

 

만약 버튼을 하나 만든다고 하자.

 

보통은 이렇게 css 를 이용하기위해 className 울 설정하고 css 파일을 만들어 줘서 그 곳에서 스타일을 지정해준다.

 

이러한 행동을 javascript 안에서 모두 해결하고 싶다 할때 Styled-Components 를 쓰면 된다.

 

사용 방법은

 

컴포넌트 밖에서(import 해주는곳 바로 아래에서 선언하면됨.)

 

1. 첫글자가 대문자인 변수를 하나 선언해주고 import 한 styled. 를 이용해준다.

 

2. 여기서 styled. 다음에 원하는 div button span 등등 사용하려고 했던 태그를 그 다음에 넣어주면 된다

 

3. 그 다음 백픽 기호를 사용해준다. (키보드의 ~  키인데 쉬프트를 안누를 때 나오는 문자 백픽 ` ` )

 

4. 그 사이에 넣고자 했던 스타일들을 넣어주면 된다.

 

5. 처음에 스타일을 입히고자 했던 태그의 위치에 변수이름을 넣으면 된다

 

 

 

 

 

🔍Styled-Components 의 주요 기능1!

props 를 통하여 각 컴포넌츠에 그때 그때 다른 값을 적용이 가능하다!!

이 경우에는 ButtonColor 라는 태그로 이루어 졌을때

백그라운드는 무조건 노란색을 사용해야 하고 다른색을 사용하고자 하면 하나 더 선언했어야 했다.

 

하지만 props 를 이용하면 선언 하지 않고 색만 바꿀 수 있다.

만약 다른색의 버튼을 하나 더 추가하고 싶을때 ?

props에 다른값만 넣어서 바로 추가해주면 끝!

이렇게 쓰는건 문법이 아니라 그냥 라이브러리에서 정해준 규격이기 때문에 그냥 감사합니다 하고 사용해라!

 

 

🔍Styled-Components의 주요기능 2!

 

기능적인 요소들을 더 추가가 가능하다.

백그라운드 컬러에 따라서 글자색을 바꿀 수 있는 것이다.(props 를 이용하여)

어 skyblue 버튼의 글자색이 맘에 안드는데?

배경색인 props.bg 가 sky 블루이면 글자색은 하얀색으로 아니면 검정색으로 해라 !! 라는 기능도 추가가 가능하다.

 

 

🔍Styled-Components 주요 기능 3!

 

기능 복사하기!!

위의 버튼 컬러의 기능이 맘에 든다! 저걸 그대로 복사해서 원형버튼 한번 만들어 보고 싶다!! 하면

저렇게 하면 버튼의 태그와 그 내부의 스타일들이 그대로 적용된다.

props 의 기능까지 그대로 복사되는것을 확인 할 수 있다.

 

 

 

 

🔍강사님이 알려주시는 Styled-Components 의 장점!

장점 1. CSS 파일 안열어도 된다.

 

장점 2. 스타일이 다른 js 파일로 오염되지 않음.

🔨이러한 오염을 방지하려면 컴포넌트.module.css 로 작명을 해라!

 

장점 3. 페이지 로딩 시간이 단축된다.

🔍 스타일 컴포넌트를 통한 스타일들은 태그에 style 을 직접 넣은 느낌으로 적용이 되어서

css 파일을 따로 안거치고 바로 입력이 되어 로딩시간이 단축된다.

 

🔍강사님이 알려주시는 Styled-Components의 단점!

 

단점 1. js 파일이 매우 복잡해진다.

 

단점 2. 다른 js 파일에서 스타일을 재사용하고싶다 하면 export 하고 import 하면 되는데 이럴바엔 걍 css 쓰지!

 

단점 3. 팀으로 일할 때 css를 담당해서 하는 분들이 이 코드를 이해 못할 가능성이 있다.

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/