[9장] 컴포넌트 스타일링

atmosg 2022. 3. 20. 13:37

리액트에서 컴포넌트 스타일링시 이런저런 방식을 사용할 수 있는데, 회사마다 요구하는 스펙이 다르고 개발자 취향마다도 다르기 때문에 대충이라도 뭐가 있는지 알아둘 필요가 있다.

스타일링 방식	설명
CSS	그냥 쌩 CSS
SASS	자주 사용되는 CSS 전처리기(pre-processor)
CSS Module	CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션
styled-components	스타일을 자바스크립트 파일에 내장시키는 방식

1. CSS

딱히 설명할건 없고 소규모 프로젝트 개발시엔 쌩 CSS로도 충분하다. 진짜 뭐 설명할건 없고 CSS클래스는 중복되지 않도록 만드는게 가장 중요하다.

2. Sass

아.. 이건 그냥 강의 탭에 따로 정리해뒀던거 보면 될 듯? 뭐 특별한 내용은 없고 sass-loader 설정 커스터마이징이나 node_modules에서 라이브러리 불러오는 방법같은건 그냥 필요할 때 책보는게 더 나을듯 (405p ~ )

3. CSS Module

CSS를 사용할 때 클래스 이름을 고유한 값으로 자동 생성해 클래스 이름의 중첩 현상을 방지해주는 기술. [파일이름]_[클래스이름]_[해시값] 형태로 자동으로 만들어줌.

1) 기본 사용법

.module.css 확장자로 파일을 만들고 갖다 쓰면 된다.

만약 클래스 이름을 2개 이상 설정해주고 싶다면 템플릿 리터럴로(그니까 백틱기호 써서) 문자열을 합쳐주면 된다.

ex) <div className={`${styles.wrapper} ${styles.inverted}`}>

2) classnames 라이브러리

CSS클래스를 조건부로 붙였다 뗐다 하고 싶을때 쓰면 유용한 라이브러리. 특히 CSS Module과 사용하면 궁합이 좋다.

(https://www.npmjs.com/package/classnames)

Ex1) 컴포넌트에서 조건부로 클래스 설정하기( props )

props로 전달받은 hihtligted, theme가 true면 클래스 이름으로 들어갈 것이고, 아니면 안붙음

Ex2) CSS모듈과 함께 쉽게 써보자

3) Sass와 함께 사용하기

.module.scss 확장자로 만들어주면 Sass문법을 그대로 갖다 쓸 수 있다. 설명 끝 ㅅㄱ

4. styled-components

자바스크립트 파일 안에 스타일을 선언하는 방식. CSS-in-JS라고 부르는데, 유명한 라이브러리로 styled-components와 emotion이 있다. 사실 무슨 쓸모가 있겠냐는 생각이 들긴 하지만 가장 큰 장점은 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 점이다. 뭐 어찌됐든 구경이나 해보자.

※ 이걸 쓰기 전에 VS Code Extensions 가서 vscode-styled-components 검색해서 설치하자 (이유는 백틱 기호를 쓰느라 VSCode가 문자열로 인식해서 코드 신택스 하이라이팅(문법에 따라 에디터 폰트 색상을 입히는 작업)이 제대로 안됨)

1) Tagged 템플릿 리터럴

위에 코드를 보면 백틱 기호를 써서 만든 문자열에 스타일 정보를 넣어 주었다. 이러한 문법을 Tagged 템플릿 리터럴이라고 하는데, 템플릿 리터럴을 이용하여 함수의 인자를 파싱하여 넘겨주는 것을 말한다.

원래 일반 템플릿 리터럴에선 객체나 함수를 온전히 전달할 수 없는데(*별첨 확인) 태그드 템플릿 리터럴을 사용해서 객체나 함수의 원본 값을 그대로 추출하는 것이다. 이렇게 하면 styled-components로 만든 커모넌트의 props를 스타일 쪽에서 쉽게 조회할 수 있게 되는 것.

function tagged(...args) {
    console.log(args);
}

tagged`hello ${ { name: 'kim'} } ${ ()=>'hello' }`

// (3) [Array(3), {…}, ƒ]
// 0: (3) ['hello ', ' ', '', raw: Array(3)]
// 1: {name: 'kim'}
// 2: ()=>'hello'
// length: 3
// [[Prototype]]: Array(0)

*별첨 : 콘솔창 열어서 아래 리터럴을 출력해보면 객체와 함수 형태가 전부 잃어버린 상태로 출력됨

`hello ${ { name: 'kim'} } ${ ()=>'hello' }`
"hello [object Object] ()=>'hello'"

2) 스타일링된 Element

컴포넌트 상단에 styled를 불러오고, styled.태그명을 사용하면 스타일링된 엘리먼트를 만들 수 있다.

바로 위에서 보듯 <Box>, <Button>라는 이름으로 <div>, <button> DOM Element를 만들어 사용한다는 뜻. 아래와 같은 방식으로 선언하는 것도 가능하다.

// 태그 타입을 styled 함수의 인자로 전달하기
const MyInput = styled('input')`
    background: gray;
`

// 컴포넌트 넘겨주기
const StyledLink = styled(Link)`
    color: blue;
`

3) props에 따른 조건부 스타일링

일반 CSS에선 클래스명에 따라 조건부 스타일링을 하겠지만, 스타일드 컴포넌트에선 props로 처리가 가능하다.

✓