[React] 컴포넌트 스타일링 (styled-components, 반응형 디자인)

일반 CSS

컴포넌트를 스타일링하는 가장 기본적인 방식으로,

특별한 규칙을 사용하여 클래스 이름을 짓는 방식과 CSS Selector를 활용하는 방식이 있다.

 

1. 이름 짓는 규칙

(컴포넌트 이름)-(클래스 형태)

컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지한다.

예시)

App-header, App-logo,,,

 

2. CSS Selector

CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다.

예시) 

// App 클래스 안의 logo 클래스
.App .logo {
	...
}

// App 클래스 안의 header 태그
.App header {
	... 
}

 

Sass

자주 사용하는 CSS 전처리기 중 하나로, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줌

복잡한 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지보수를 더욱 쉽게 해줌

.sass, .scss 확장자들을 지원한다.

(.sass는 중괄호와 세미콜론을 사용하지 않으며, .scss는 기존 CSS 문법과 동일하게 사용한다.)

 

CSS Module

스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 ([파일이름]_[클래스이름]_[해시값])으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해준다.

 

styled-components

스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줌

 

CSS-in-JS 라고 부르는 라이브러리 중 가장 많이 쓰인다.

.css나 .scss 같은 스타일 파일을 따로 만들지 않아도 된다.

props 값으로 전달해주는 값을 쉽게 스타일에 적용할 수 있다.

 

1. Tagged 템플릿 리터럴

``를 사용하여 만든 문자열에 스타일 정보를 넣어주었다.

 

2. 스타일링된 엘리먼트

컴포넌트 파일 상단에서 styled를 불러오고, (styled.태그명)을 사용하여 구현한다.

import styled from 'styled-components';

const MyComponent = styled.div`
	...
`;

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

// 컴포넌트 형식의 값을 넣어 줌
const StyledLink = styled(Link)`
	...
`;

이렇게 리액트 컴포넌트가 생성된다. 

<MyComponent></MyComponent> 로 사용 가능하다.

 

3. 스타일에서 props 조회

스타일쪽에서 컴포넌트에게 전달된 props 값을 참조할 수 있다.

const Box = styled.div`
    // props로 넣어준 값을 직접 전달해 줄 수 있다.
    background: ${props => props.color || 'blue'};
    ...
`;

 

4. props에 따른 조건부 스타일링

styled-components에서는 조건부 스타일링을 간단하게 props로도 처리할 수 있다.

const Box = styled.div`
    ...
    ${props =>
    	props.inverted &&
        `
            ...
    	`
    };
`;

 

5. 반응형 디자인

브라우저의 가로 크기에 따라 다른 스타일을 적용하기 위해서는 일반 CSS를 사용할 때와 똑같이 media 쿼리(query)를 사용한다.

const Box = styled.div`
    ...
    @media (max-width: 1024px) {
        ...
    }
    @media (max-width: 768px) {
        ...
    }
`;

이러한 작업을 여러 컴포넌트에서 반복해야 한다면 조금 귀찮을 수 있다.

그럴때는 이 작업을 함수화하여 간편하게 사용 가능하다. 

import styled, {css} from 'styled-components';

const sizes = {
    desktop: 1024,
    tablet: 768
};

const media = Object.keys(sizes).reduce((acc, label) => {
    acc[label] = (...args) => css`
        @media (max-width: ${sizes[label] / 16}em) {
            ${css(...args)};
        }
    `;
    
    return acc;
}, {});

const Box = styled.div`
    ...
    ${media.desktop`width: 768px;`};
    ${media.tablet`width: 100%;`};
`;

아예 다른 파일로 모듈화한 뒤 여기저기서 불러와 사용하는 방식으로 사용하면 된다.

 

마무리

이렇게 다양한 리액트 컴포넌트 스타일링 방식 중 무엇을 선택할지는 자유다.

 

출처 : 리액트를 다루는 기술