Medium - Four ways to style react components

05 Oct 2019 in Trend

원문 - Agata Krzywda

Trend 파악을 Medium 기고문 요약 포스팅 - 리액트 컴포넌트를 스타일링하는 4가지 방법

리액트 컴포넌트를 꾸미는 4가지 옵션이 있습니다. 모든 것은 여러분의 선호도와 여러분 어플리케이션의 특정 복잡도에 달려있습니다. 여러분이 스타일 프로퍼티를 조금만 사용한다면 inline 스타일링이 최고의 선택이 될 것입니다.

여러분이 같은 파일에 있는 스타일 프로퍼티를 재사용하고 싶다면 style 컴포넌트가 최적일 것입니다. 만약 어플리케이션이 더욱 복잡하다면 CSS 모듈이나 CSS 스타일시트를 추천드립니다.

1.CSS Stylesheet

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  <div className="DottedBox">
    <p className="DottedBox_content">Get started with CSS styling</p>
  </div>
);

export default DottedBox;

• import ‘/.DottedBox.css’ 처럼 쉽게 css파일을 임포트하여 각 컴포넌트에 분리된 css파일을 가질 수 있습니다.

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

2.Inline styling

리액트에서 inline 스타일은 문장열로 지정되지 않습니다. 대신에 카멜케이스 스타일로 이름이 지어진 객체로 지정됩니다. 객체의 값은 스타일 값으로 주로 문자열입니다.

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};
const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (
  <div style={divStyle}>
    <p style={pStyle}>Get started with inline style</p>
  </div>
);

export default Box;

• 스타일 프로퍼티를 저장하는 변수를 만들 수 있고 다음과 같이 스타일 요소에 전달할 수 있습니다. style={nameOfvariable}
• 스타일에 바로 값을 전달할 수 있습니다. style={ {color: ‘pink’} }

3.CSS Modules

CSS모듈은 모든 클래스 이름과 애니메이션 이름이 기본적으로 지역 스코프인 CSS파일을 말합니다.

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
  </div>
);

export default DashedBox;

• css파일을 임포트하는 것과 마찬가지로 import styles ‘./DashedBox.css’ 로 임포트합니다.
• 객체에 접근하는 것처럼 클래스 이름에 접근합니다.

:local(.container) {
  margin: 40px;
  border: 5px dashed pink;
}
:local(.content) {
  font-size: 15px;
  text-align: center;
}

:.local(.className) 이것은 웹팩설정 때문에 create-react-app을 사용할 때 쓰입니다. .className은 여러분이 리액트 boilerplate를 사용할 때 쓰입니다. CSS 모듈을 웹팩과 사용하도록 하려면 위에 언급된 모듈을 포함하고 다음과 같은 로더를 webpack.config.js 파일에 추가하세요

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

4. Styled-components 💅

스타일 컴포넌트는 리액트와 리액트 네이티브가 컴포넌트 레벨의 스타일을 여러분의 응용프로그램에서 사용할 수 있도록 해줘서 자바스크립트와 CSS를 혼합하여 사용할 수 있게 해줍니다.

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
  margin: 40px;
  border: 5px outset pink;
  &:hover {
   background-color: yellow;
 }
`;

const Paragraph = styled.p`
  font-size: 15px;
  text-align: center;
`;

const OutsetBox = () => (
  <Div>
    <Paragraph>Get started with styled-components 💅</Paragraph>
  </Div>
);

export default OutsetBox;

• 먼저 styled-components 라이브러리를 설치합니다 (npm install styled-components –save)
• 이제 특정 html 요소를 선택해서 스타일키를 저장할 수 있습니다. const Div = styled.htmlElement’color:pink’
• 리액트 컴포넌트와 같은 래퍼에 우리의 변수들의 이름을 사용할 수 있습니다.

Summary

• 위의 4가지 스타일링 방법은 모두 장단점이 있다.
• 모든 것은 여러분의 개인 취향과 앱의 복잡도에 따라 달려있다.
• 모든 것을 사용해보며 각 스타일링 방법을 직접 경험해보는 것이 좋다.