🌞 styled-components

🌥 styled-components란

기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.

---

🌥 환경설정

---

🌥 예시

---

🌥 styled components 만들기

const 컴포넌트명 = styled.태그명스타일 넣기...문법으로 만들어집니다. 만들고자하는 컴포넌트의 render 함수 밖에서 만듭니다.

---

🌥 스타일에 props 적용하기

styled-component를 사용하는 장점 중 하나가 변수에 의해 스타일을 바꿀 수 있다는 점입니다. 위 예시를 보면 email이라는 state값에 따라 ExampleWrap에 prop으로 내려준 active라는 값이 true or false로 바뀌게 됩니다. styled-component는 내부적으로 props을 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있습니다.

---

🌥 스타일 상속

const 컴포넌트명 = styled.스타일컴포넌트명스타일 넣기...문법으로 만들어집니다. 기존에 있는 스타일컴포넌트를 상속받아 재사용합니다.

---

🌥 Mixin css props

css props는 자주 쓰는 css 속성을 담는 변수입니다. css 변수명 = css스타일... 로 사용합니다.

---

🌥 다른 파일에서 컴포넌트 import

해당 파일에서 정의한 css를 export하여 다른 파일에서 import 할 수 있습니다.

---

🌥 반응형디자인

위 예시를 응용하면 반응형을 쉽게 만들 수 있습니다. styled-components-media (opens new window)이 링크를 공부하시면 좋을 것 같습니다.

---

🌥 global css

프로젝트 전역으로 발동하는 css를 만들 수 있습니다.

---

🌥 attribute 추가

---

🌥 css 모듈 분리

---

🌥 global Theme

전역으로 css를 정의할 수 있습니다. (색, css 등)

1.root 레벨에 공동으로 사용할 theme.js를 만든다

2.ThemePrivider를 프로젝트의 root dir에 import하고 아래와 같이 정의한다

3.전역에서 호출하여 사용한다.

---

🌥 글로벌 css에 minxin 기능을 넣고 어느 컴포넌트에서나 사용하게 할 수 있습니다.

1. global-styled.ts에 mixin을 정의합니다.

2.global-styled를 웹의 가장 상단 index.js에 import 합니다

3.이후 아무 컴포넌트에서나 글로벌에서 정의한 mixin기능을 사용할 수 있습니다.