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 리액트] 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

[dB's 몽고DB] MongoDB 데이터베이스 사용하기

오라클, MySQL 을 관계형 데이터베이스 라고 합니다. 이는 데이터를 담고 있는 복수 개의 테이블들이 긴밀하게 연결되어 있기 때문입니다. 이와 다르게, 몽고DB는 NoSQL 입니다. "SQL이 필요없다"가 아니라 "비관계형 데이터베이스 SQL" 이라는 뜻을 내포하고 있습니다. 이유는, DB에 접근하기 위해서는 결국 몽고DB에서 사용하는 쿼리문법이 필요하기 때문입니다. 특별히, 몽고DB는 자바스크립트 객체를 그대로 저장할 수 있어서 자바스크립트를 사용하는 노드에서 데이터를 저장하기에 적합합니다. 그렇기 때문에 데이터 저장, 조회 방식도 기존 SQL과 다릅니다. 이는 성능을 최우선으로 생각하기 때문에 고안된 방법이며 실시간 서비스나 대용량 트래픽을 감당할 수 있는 메시징 시스템등에 사용됩니다. 몽고DB는 데이터베이스의 테이블 대신, 여러 데이터가 모인 컬렉션(Collection)을 사용합니다. 즉, 데이터베이스는 컬렉션의 집합이고 각각의 컬렉션은 여러개의 문서객체(Document)를 가질 수 있습니다. 1. 몽고DB 설치하기 몽고DB 다운로드 센터로 이동 Installing with Homebrew 몽고DB 설치 brew install mongodb 데이터베이스 저장 폴더 만들기 mkdir -p /data/db 권한 부여하기 chown $USER /data/db 몽고DB 활성화가 되면서 27017 포트에서 연결을 기다린다는 메시지가 표시됨   mongod 몽고Shell 접속하기 새로운 터미널에서 mongo 2. 데이터베이스 생성과 입력, 삭제 데이터베이스 지정 use local 컬렉션 만들기 db.users.insert({name: '소녀시대'}) 컬렉션 문서조회 db.users.find().pretty() 문서삭제 d b.users.remove({name:/소녀시대/}) 로그인에 필요한 데이터 입력 db.users.insert({id: 'tes...
Post a Comment
Read more