REACT 9일차 (Style component)

학기도 끝났고 bob도 깔끔하게 면접에서 찢겼다...

리액트 공부를 빨리 마치고 방학동안은 백앤드를 집중적으로 공부해서

이번 방학이 지나면 웹찢남이 되기를 바라며...

 

스타일 컴포넌트란 css나 sass 같은 스타일 파일을 따로 작성하지않고

컴포넌트 안에서 스타일을 정의하여 바로 사용하는 방법이다.

css 방식의 경우 컴포넌트를 공유할때 스타일 파일도 공유해야하고 관리도 번거롭다.

 

리액트를 배운다는 건 어느정도 css에 지식이 있다는 것을 전제로 한번 살펴보면

 

const Title=() => <div class Name="title"> 취킨좋아~! </div>

 

const Page=()=>(

  <div>

    <h1><TItle /></h1>

        난 뿌링클이 좋아

    <ul><Title /></ul>

  </div>

);

 

위와 같은 함수형 컴포넌트에 아래와 같은 css파일을 작성하면??

.title {

  font-size: 16px;

  color: black;

}

 

h1태그와 ul 태그 속에 title class가 적용되어 같은 스타일이 적용된다.

하지만 css에 아래와 같은 코드를 추가로 넣으면

 

h1> .title {

  font-size: 18px;

  color: blue;

}

 

h1> .title의 스타일이 다르게 적용된다.

만약 태그가 10개 겹치고 코드의 양이 거대해질수록

이런 방식은 생각만 해도 어지럽다. (마치 내 티스토리 처럼)

 

결국 CSS-in-Js 라는게 등장했다. 이런 긴 클래스이름을 짧게 변환도 해주고

적은 용량으로 파일을 쉽게 관리할 수 있다.

내가 산 책에서는 react-with-styles라는 스타일 컴포넌트 라이브러리를 사용한다.

개인적으로 프론트앤드의 꽃은 css라 생각하는데 벌써 기대된다...

 

1. react-with-styles 라이브러리 설치방법

-프로젝트 루트 폴더에서 아래 명령어 입력(cmd)

yarn add react-with-styles aphrodite react-with-styles-interface-aphrodite

 

2. 테마 파일 만들기 (Theme.js)

프로젝트 전체에서 사용할 스타일 파일 제작 하기

 

export default {
  color: {
    primary: '#03a9f4', // 주 색상
    secondary: '#795548', // 부 색상
    white: '#FFFFFF',
    gray: '#CCCCCC',
    default: '#999999', // 기본 문자 색상
    error: '#FF0000', // 오류 색상
  },
  // 폰트 사이즈
  size: {
    xg: 24,
    lg: 18,
    md: 14,
    sm: 12,
    xs: 10,
  },
  lineHeight: {
    xg: '60px',
    lg: '54px',
    md: '36px',
    sm: '24px',
    xs: '18px',
  },
  // 길이 단위
  unit: 4,
};

 

3. 공용 스타일 컴포넌트 함수 제작 (withStyles.js)

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
import Theme from './Theme';

ThemedStyleSheet.registerTheme(Theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
export default withStyles;

 

4. react-with-styles를 적용할 컴포넌트 작성

 

import React, { PureComponent } from "react";

import PropTypes from "prop-types";

import withStyles, { css } from "./withStyles";

 

class Text extends PureComponent {

  render() {

    const { children } = this.props;

 

    return <span>{children}</span>;

  }

}

 

Text.propTypes = {

  children: PropTypes.node.isRequired,

};

 

export default Text;

 

위의 코드는 자식 프로퍼티로 받은 노드를 span 엘리먼트 안에 출력하는 코드다.

이렇게 코드를 짰으니 스토리에 추가해보자

 

5. 스토리 추가

 

import React from "react";

import { storiesOf } from "@storybook/react";

import Text from "../04/Text";

 

storiesOf("Text", module).addWithJSX("기본설정", () => <Text>안녕하세용~!!</Text>);

 

그러면 위와 같은 안녕하세용~!!을 볼 수 있다.

이제 해당 컴포넌트에 스타일을 추가해보자

 

6. 스타일 추가(Text.jsx)

import React, { PureComponent } from "react";

import PropTypes from "prop-types";

import withStyles, { css } from "./withStyles";

 

class Text extends PureComponent {

  render() {

    const { children, styles } = this.props;

 

    return <span {...css(styles.default)}>{children}</span>;

  }

}

 

Text.propTypes = {

  children: PropTypes.node.isRequired,

};

 

export default withStyles(({ color, size }) => ({

  default: {

    color: color.default,

    fontsize: size.md,

  },

}))(Text);

위는 기존의 Text.jsx에 스타일을 추가한 것이다. 추가하면 아래와 같이 스토리가 바뀐다.

테마파일에 등록된 값 color,size를 with styles 함수에 전달하여 default 색상과 md 크기로 변경된 것을 볼 수 있다.

 

7. 프로퍼티에 따른 스타일 관리법(Text.jsx)

컴포넌트의 프로퍼티 값에 따라 스타일이 바꾸도록 바꿔보자

import React, { PureComponent } from "react";

import PropTypes from "prop-types";

import withStyles, { css } from "./withStyles";

 

class Text extends PureComponent {

  render() {

    const { children, styles, xsmall } = this.props;

 

    return <span {...css(styles.default, xsmall && styles.xsmall)}>{children}</span>;

  }

}

 

Text.propTypes = {

  children: PropTypes.node.isRequired,

  xsmall: PropTypes.bool,

};

 

export default withStyles(({ color, size }) => ({

  default: {

    color: color.default,

    fontsize: size.md,

  },

  xsmall: {

    fontSize: size.xs,

  },

}))(Text);

 

위와 같은 식으로 default 외에도 여러 스타일을 적용할 수 있다.

조금 후에 storybook에서 프로퍼티를 전달할 때 만약 <Text xsmall>추가해보자</Text>를 추가하면

위의 xsmall && styles.xsmall 때문에 True가 되어 해당 xsmall 스타일을 적용한다.

 

이렇게 Text를 사용한것 외에도 Button도 사용이 가능할 것이다. 

적용법은 간단하다. 위의 Text.jsx에서 Tex만 Button으로 고치고 story에 추가해보자

다들 아래와 같이 스타일 적용도 잘 하실거라 생각합니다!

 

 

마무리로 오늘 한 스타일 적용의 과정을 떠올려 봅시다.

1. withStyles.js에서 처음에 만든 Theme.js 파일 등록

2. Text.jsx에서 withStyles 함수를 import

3. 이때 css 함수를 import하여 엘리먼트에 스타일 적용

4. 스타일 생성함수를 호출하여 테마파일에 등록된 값을 withStyles 함수에 전달

 

헷갈리는 부분이 있을거라 생각하는데 저도 헷갈립니다.. react-with-styles로 스타일을 적용하려면

반환값이 함수인 withStyle 함수를 사용하는데 이를 커링 형태라고 합니다. 다음 장에 설명을 한다니까

그때 다시 생각해보도록 하겠습니다.