Component 와 Styling

JJ_Dean·2022년 12월 24일

목록 보기

8/14

Component를 스타일링하는 방법

1. CSS import

import './CssStyle.css';

첫 번째 방법은 위 코드처럼 CSS 파일을 분리하여 컴포넌트 내부에서 import로 직접 불러오는 방법이다. JSX 코드에서는 이 클래스 이름을 그대로 사용하거나 동적으로 추가할 수 있다.

장점

파일 분리가 가능하다.
- 파일을 분리하면 유지보수가 쉬워진다.
보통의 CSS 파일을 작성하듯이 작성한 후 import만 해주면 된다.
- 컴포넌트 내부에서 스타일적으로 추가 작성할 부분이 없다.

단점

CSS 파일, 컴포넌트 마다 클래스 이름을 모두 다르게 설정해주어야 한다.
- CSS 파일의 선택자는 import 받은 컴포넌트 만의 스타일이 아니게 된다. 즉 CSS의 scope가 전역적이다.
혹시라도 다른 컴포넌트의 요소에 같은 이름으로 클래스 이름을 정하면 그 곳에도 똑같은 스타일이 적용된다.

CSS 모듈

CSS-in-CSS 스타일링을 위한 방법이다.

import styles from './Css.module.css';

이 방법은 위 코드처럼 CSS 파일을 분리하되 import 할때는 저장 공간이 아닌 변수(예 : styles)로 불러 마치 모듈 처럼 불러온다.
이때 CSS 파일의 이름은 ~.module.css로 작명해야한다.

CSS 모듈을 사용하면 동적으로 클래스 이름을 지정해줄 수 있다.
사용 방법의 예시는 다음과 같다.

이 styles(CSS 모듈을 받아온 변수)에서 클래스 이름을 호출하여 사용한다.
Css.module.css 파일안에 .form-control 와 .form-control.invalid 가 선택자로 작성되어 있다.

div 태그 안에 clssName={} 으로 동적 네이밍 할 수 있게 준비해주고 템플릿 리터럴 안에 자바스크립트문을 작성할 수 있는 '${}' 를 사용한다.

클래스 이름을 호출할 수 있는 방법은 'styles.클래스이름' 을 사용한다.
하지만 form-control처럼 중간에 '-' 기호가 쓰여진 경우 styles.form-control을 인식하지 못한다. 이때 ' ['클래스이름'] ' 으로 작성하면 호출할 수 있다.

이후 이 리액트 앱을 실행하면 해당 요소에 대한 클래스 이름은 다음처럼 설정된다.

이 요소의 클래스 이름은 CSS 모듈 기능을 통해 자신만의 클래스 이름을 가지게 되었고, 이 이름은

컴포넌트 이름_클래스 이름__고유한 해시값

으로 이루어져 있다.

장점

파일 분리가 가능하다.
- 파일을 분리하면 유지보수가 쉬워진다.
CSS 스타일이 해당 컴포넌트 범위에만 적용된다.
- 다른 컴포넌트의 요소와 같은 클래스 이름을 갖더라도 결국 실행 하는 과정에서 다른 해시값 즉 다른 클래스 이름을 갖기 때문에 컴포넌트의 요소들간의 충돌이 없어진다. 즉 CSS의 scope를 지역적으로 만들어준다.

단점

많은 CSS 파일 만들어 각각 관리해야 된다.

Styled-Components

Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크이다.
npm 으로 설치할 수 있고 사용하기 위해 다음처럼 import한다.

import styled from 'styled-components';

상수로 변수를 정의하고 위에서 import해온 styled.요소이름 으로 작성한다.

const FormControl = styled.div`
  margin: 0.5rem 0;

  & label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: ${(props) => (props.invalid ? 'red' : 'black')};
  }

이제 이 FormControl은 템플릿 리터럴 안의 스타일을 담은 div 역할을 한다.
이때 styled-component를 이용하여 스타일을 작성할 때의 규칙이 있다.

자기 자신을 선택자로 쓸때는 아무런 선택자도 쓰지 않는다.
자신 하위 요소들을 선택할 때는 자기 자신을 '&' 로 지칭한다.
JSX 코드에서 props를 받아 가용할 수 있다.

이 styled-component로 작성된 변수는 JSX 코드에서 다음과 같이 사용한다.

<FormControl invalid={!isValid}>
	<label>Course Goal</label>
</FormControl>

'invalid'를 styled-component의 props로 넘긴 모습이다.
이 리액트 앱을 실행하면 다음과 같이 요소들이 설정된 것을 알 수 있다.

클래스 이름이 모두 해시값으로 해당 컴포넌트에서만 styled-component로 작성된 스타일이 적용되도록 설정된다.