Skip to main content

[dB's CSS 모듈] 리액트 컴포넌트 스타일링 (CSS Modules & React Component)

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 자주 사용하는 방법으로는 아래 3가지가 있습니다. 이번 포스팅에서는 CSS 모듈에 대해 알아보도록 하겠습니다.

1. CSS Module
2. Sass
3. styled-components 

import withStyles from 'isomorphic-style-loader/lib/withStyles'
import * as s from './Header.scss'
import 된 Headers.scss 는 s 객체로 변환되며, key와 value값으로 클래스명에 접근하게 됩니다. 

{
 apply: "Businesses-apply-bc84",
 btn-choice: "Businesses-btn-choice-c57b",
 cell: "Businesses-cell-c929",
 root: "Businesses-root-c558"
}
리액트에서 명명된 스타일 객체에 접근하려면 아래와 같이 사용할 수 있습니다. (자바스크립트 객체값 접근 방법). key값이 캐밥스타일(kebab-case)로 이루어져 있다면, 오류를 줄이고자 작은따옴표를 사용하는 것을 권장 합니다. 

<div className={s.item}></div>
<button className={s['btn-wide']}></button>
CSS 스타일 로더를 사용하는 이유는 CSS 랜더링 및 동일구조 앱 환경 최적화를 목표로 하고 있습니다. Isomorphic Javascript 앱은 클라이언트와 서버 사이드 모두에서 작동되는 것을 말합니다. 이러한 앱을 만들려면 가장 중요한 것이 바로 추상화입니다. 즉, 의존성을 제거하고 어디서든 사용할 수 있도록 각각의 기능과 역할에만 집중해야 합니다. CSS 스타일도 마찬가지 입니다.

CSS Modules 좀 더 자세히 알아보기

CSS 모듈은 모든 클래스명과 애니메이션명이 지역적 스코프로 선언되어 있는 것을 말합니다. 공식적인 스펙은 아니고 웹팩의 도움을 받아 빌드 과정을 거칩니다. 일반적으로 HTML과 CSS는 아래 같이 연결되며 특별한 과정없이 브라우저는 이것을 이해합니다.

// HTML
<h1 class="title">An example heading</h1>

// CSS
.title {
  background-color: red;
}
CSS 모듈은 다른 접근 과정을 거칩니다. 평범한 HTML을 사용하는 것이 아니라 모든 마크업은 자바스크립트 파일로 변형됩니다. 아래 빌드 과정에서 컴파일러는 styles.css를 탐색하여 .title 클래스가 styles.title로 접근이 가능하게 합니다. 

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;
이후에 분리된 새로운 HTML, CSS 파일이 생성됩니다. 

// HTML
<h1 class="_styles__title_309571057">
  An example heading
</h1>

// CSS
._styles__title_309571057 {
  background-color: red;
}
기존에 있던 .title 클래스는 완전히 사라지고 완전히 새로운 문자열로 교체가 되었습니다. 브라우저에서 기존에 있던 클래스명은 찾아 볼 수 없습니다. 클래스가 역동적으로 생성되었으며 이는 유니크하며 정확한 스타일과 맵팽되었습니다. 이것을 스코프 되었다고 말합니다. 만약, buttons.css 파일이 있다면 오직 button.js 탬플릿에만 적용되며 그 안에 있는 .btn 클래스는 특별히 불러오지 않는 이상 다른 탬플릿에서는 접근이 불가능합니다.
Labels:

Comments

Post a Comment

Popular posts from this blog

[dB's 리액트] Styled Components_ 기본개념

컴포넌트 제작 1. Small, focussed component 2. Container component class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } } Containers와 components를 분리합니다. Containers는 작동원리를 포함하고, components는 어떻게 보이는지를 나타냅니다. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } } 그렇다면 스타일링은 어떨까요? 1. Single-use classes 2. Components as a s...
Post a Comment
Read more

[dB's 리액트] Render Prop 사용하기

HOC는 코드 재사용 문제를 해결하기 위해 고안되었습니다. createClass 패러다임에서는 이러한 문제를 mixins으로 해결하였습니다. ES6 classes 가 등장하고 createClass는 사라지기 시작했습니다. 하지만 ES6 클래스는 mixins을 지원하지 않는다는 문제점이 있었습니다. 그 결과 HOC가 등장하였으며 재사용에 대한 이슈를 해결한 듯 보였지만, 기존 mixins이 가지고 있던 모든 이슈들을 해결한 건 아니였습니다. Render Props를 사용하면 mixins과 HOC가 가지고 있는 문제점들을 해결할 수 있습니다. Render Props 패턴은 함수로 이루어진 props를 이용하여  컴포넌트 간 코드를 공유하는 방법입니다. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' // Instead of using a HOC, we can share code using a // regular component with a render prop! class Mouse extends React.Component { static propTypes = { render: PropTypes.func.isRequired } state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div style={{ height: '100%' }} on...
Post a Comment
Read more

[dB's 리액트] 리액트 16.3 무엇이 바뀌었나?!

리액트 16.3 버전이 새롭게 업데이트 되었습니다. 새로운 라이프 사이클과 API들이 소개 되었습니다: context API, ref forwarding API, ergonomic ref API 입니다. Context API Context API는 기존에도 제공되었습니다. 하지만, 상속 문제로 인해 사용 빈도가 적었으며 더 좋은 방법들로 대체되었습니다. 예로, redux, react-router, styled-components 등이 Context API를 기반으로 제작 되었습니다. Context는 CreateContext 함수를 이용해서 제작합니다. 이 함수는 Provider와 Consumer를 호출할 수 있습니다. Provider는 Context에서 사용할 값을 설정하고 Consumer는 설정한 값을 불러올 때 사용합니다. const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } } class ThemedButton extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => <Button theme={theme} />} </ThemeContext.Consumer> ); } } 링크 https://hackernoon.com/how-to-use-the-new-react-co...
Post a Comment
Read more