폭풍 같던 Hooks를 지나.... 오늘도 뚠뚠뚠...
9장. 컴포넌트 스타일링
아무리 디자인에 무심한 편이라 해도... 지금껏 만든 컴포넌트들은 눈 뜨고 봐줄 수준도 못된다!
그나마 좀 괜찮은 디자인을 위해 → 컴포넌트 스타일링 방법을 배워볼 예정.
오늘 해볼 방식은 총 4가지!
- 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식.
- Sass : 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 도움.
- CSS Module : 스타일을 작성 시 CSS 클래스가 다른 CSS 클래스 이름과 절대 충돌하지 않도록 고유 이름을 자동 생성.
- styled-components : 스타일을 JS 파일에 내장 → 스타일 작성과 동시에 해당 스타일이 적용된 컴포넌트를 만듦.
오늘도 create react-app을 통해 새로운 프로젝트를 만들어주자!
1) 가장 흔한 방식, 일반 CSS
가장 흔하면서도 익숙한 방식! 일반 CSS 파일을 만들어 스타일을 적용시키면 된다.
App.css
기본적으로 만들어져 있는 App.css 파일!
이렇게 CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것!
→ 이를 위해 클래스 이름에 컴포넌트 이름을 포함시키거나, CSS Selector를 이용하기도 한다.
CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용 가능!
App.css
.App .logo → App 컴포넌트 내부의 logo라는 클래스에 적용
.App header → App 컴포넌트 내부의 header라는 태그에 적용(그래서 . 생략)
App.js
따라서 App 컴포넌트도 이렇게 바꿔줄 수 있다.
즉 컴포넌트의 최상위 HTML 요소에 컴포넌트 이름으로 className을 짓고,
그 내부에는 소문자를 입력하거나 태그를 사용해 생략할 수 있게 되는 것!
2) Sass 사용하기
Sass는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고,
스타일 코드의 재활용성을 높여 주며, 코드의 가독성을 높여 유지 보수를 쉽게 만들어준다.
Sass는 두 가지 확장자(.scss , .sass)를 지원하는데,
.scss 확장자는 기존 CSS 문법과 유사해 더욱 자주 사용된다(따라서 우리도 .scss 확장자를 이용)
우선 새 컴포넌트를 만들고, node-sass라는 라이브러리를 설치!
요 녀석은 Sass를 CSS로 변환해준다.
다름으로 SassComponent.js 와 SassComponent.css 파일을 생성!
SassComponent.js
SassComponent는 색깔이 담긴 box들이 될 예정!
SassComponent.scss
와우... 마치 CSS와 JS와 jQuery를 섞어둔 듯한 느낌!
App.js 에서 SassComponent 컴포넌트를 렌더링 해주면...!
신기방기.
만일 Sass 속 변수나 믹스인이 여러 파일에서 사용된다면?
이들을 다른 파일로 따로 분리해 작성한 후, 필요한 곳에서 쉽게 불러와 사용할 수 있다!
src 디렉터리에 styles라는 폴더를 생성한 후 그 안에 util.scss 파일을 만들어보자.
src/styles/util.scss
아까 입력한 변수와 믹스인을 입력!
SassComponent.scss
기존 SassComponent.scss에서 @import를 이용해 이들을 불러올 수 있다!
Sass의 또 다른 장점으로는 라이브러리를 쉽게 불러와 사용할 수 있다는 점!
그런데 위처럼 상대 경로를 사용해 node_mudules까지 들어가면... 너무 복잡하다!
이 경우 ~ 를 사용해 자동으로 node_modules에서 라이브러리 디렉터리를 탐지해 스타일을 불러올 수 있다.
9-3) CSS Module
CSS Module이란?
→ CSS를 불러와서 사용할 때 클래스 이름을 고유한 값,
즉 [파일 이름]_[클래스 이름]_[해시값] 형태로 자동으로 만들어 스타일 클래스 이름 중첩을 방지하는 기술!
React v2 이상부터는 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다.
우선 CSSModule.js 와 CSSModule.module.css 파일을 생성!
CSSModule.js
CSS Module이 적용된 스타일 파일을 불러오면 객체 하나를 전달받게 된다.
여기에는 CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어있다.
이러한 고유 클래스명을 사용하려면?
→ 클래스를 적용하고 싶은 JSX 엘리먼트에 className={styles.클래스 이름} 으로 전달하면 된다!
CSSModule.module.css
CSS Module을 사용하면 클래스 이름을 지을 때 고유한 값인가...에 대한 고민이 필요가 없어진다!
왜? 해당 클래스는 우리가 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문!!!
만약 특정 클래스가 웹 페이지에서 전역적으로 사용되는 경우라면 :global을 앞에 입력해주면 된다.
역시나 App에서 CSSModule 컴포넌트를 렌더링 하면...
만만세.
만약 CSSModule을 사용한 클래스 이름을 두 개 이상 적용하고 싶다면?
우선 스타일을 작성해주고!
jQuery마냥 해당 클래스 이름을 넣어주면 된다.
물론 Sass를 사용할 때도 CSS Module이 사용 가능!
CSSModule.module.scss
CSSModule.module의 확장자를 scss로 변경!
9-4) styled-components
다음은 JS 파일 안에 스타일을 선언하는 CSS-in-JS 방식!
그중에서도 가장 널리 쓰이는 styled-components 라이브러리를 사용해보자.
당연히 라이브러리를 설치!
styled-components를 사용하면 JS 파일 하나에 스타일까지 작성할 수 있다.
→ css나 scss 확장자 파일을 따로 만들지 않아도 된다는 장점!
그런데 VS Code에서 styled-components를 위해 코드를 작성하면, 그냥 문자열로 인식해버린다!
이를 해결하기 위해 요 녀석을 설치해줬다.
StyledComponent.js
흑흑흑. 왼쪽은 책을 보고 따라 친 코드. 오른쪽은 다른 사람이 쳐둔 코드.
차이점이라고는 나는 들여쓰기가 Tab, 저 코드는 띄어쓰기 두 칸이라는 점.
근데 나는 이런 에러가 뜬다! return 등에서 ()를 뺐거나 들여쓰기가 잘못된 경우에 발생한다는데...
암만 봐도 난 잘 친 것 같은데. 우째 이런 일이.
우째 이런 일이가 아니라... return을 빼먹었으니 저런 에러가 나지!
근데 책에는 return을 안적어놨다..! 당최 무슨 일이람.
아무튼 styled-components가 사용된 부분을 살펴보면...
styled.div를 통해 div를 생성함과 동시에 스타일을 적용할 수 있다!
(input을 만들고 싶으면? styled.input으로 써주면 그만! 즉 styled.생성하고 싶은 HTML요소 로 생각하면 되겠다)
background 속성에서 희한한게 사용됬는데...
생성된 Box 컴포넌트에 전달된 props.color가 있으면 해당 속성을, 없으면 blue를 줬다.
(CSS에서 props와 JS 문법을 동시에 써먹었다!)
마찬가지로 button을 하나 생성해주시고, 속성을 입혀준 것!
& ← 요 녀석은 자기 자신을 의미!
이를 통해 CSS 선택자와 함께 다양한 속성을 먹여줄 수 있겠다.
이건 더 희한하다. 아예 JS 문법으로 시작했네?
props를 건네받을텐데, inverted가 true이면(&&) CSS 속성을 입혀줬다!
(css랑 `` 요놈들은 무슨 관계? → 곧 나온다!)
CSS의 인접 형제 선택자(+)가 사용된 모습.
항상 헷갈리니까 복습 또 복습이다!
암튼 저러면 잘 뜬다. 신기하구만.
1. Tagged 템플릿 리터럴
방금 전 스타일을 적용할 때 사용했던 css` `← 요 녀석이 바로 Tagged 템플릿 리터럴이다.
템플릿 안에 JS 객체나 함수를 전달할 때 온전히 추출할 수 있다는 특징!
(일반적으로 객체나 함수는 그 형태를 잃어버리고 만다)
즉 styled-components는 이러한 속성을 사용해
styled-components로 만든 컴포넌트의 props를 스타일 쪽에서 쉽게 조회할 수 있도록 해 준다.
2. 스타일링된 엘리먼트 만들기
아까 얘기한 부분이지만..!
스타일링된 엘리먼트를 만들 때는 styled를 불러온 후, styled.태그명 을 사용해 구현한다.
styled.div`` ← 해당 스타일이 적용된, div로 이루어진, 리액트 컴포넌트가 생성된다!
만약 사용해야 할 태그명이 유동적이거나, 특정 컴포넌트 자체에 스타일링해 주고 싶다면?
styled('input') (태그 타입을 styled 함수 인자로 전달)
styled(Link) (아예 컴포넌트를 넣어 줌) 와 같이 사용하면 된다!
3. 스타일에서 props 조회하기
얘도 아까 || 가 사용된 부분!
컴포넌트에서 직접 props="black"으로 넣어줌으로서 props를 직접 전달해줬다.
4. props에 따른 조건부 스타일링
단순 변수 형태가 아닌, 여러 줄의 스타일 구문을 조건부로 설정해야 할 경우에는?
styled-components의 css를 import해 사용하면 된다!
styled-components 문제를 아직도 해결 못했다!
그런데 대체 왜 이 녀석을 써야 하는 거람!!! 그냥 CSS 파일을 만들고 싶은 마음만 굴뚝같아진다.
필요하다고 생각되면 그때 적용해봐도...! 괜찮겠다...! 물론 내 마음.
'source-code > React' 카테고리의 다른 글
| 리액트를 다루는 기술 _ 10장 - 2 (0) | 2021.03.16 |
|---|---|
| 리액트를 다루는 기술 _ 10장 (0) | 2021.03.14 |
| 리액트를 다루는 기술 _ 8장 (0) | 2021.03.10 |
| 리액트를 다루는 기술 _ 6장 (0) | 2021.03.09 |
| 리액트를 다루는 기술 _ 5장 (0) | 2021.03.09 |
