9# 컴포넌트 스타일링

GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판

(본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.)

 

 

 

 

 

 

 

 

'가장 흔한 방식, 일반 CSS'

① 이름 짓는 규칙

• ClassName 기반
• .css 파일을 따로 만들어서 사용한다.
• "컴포넌트 이름 - 클래스" 형태로 해야 충돌이 나지 않는다.

 

② CSS Selector

• 컴포넌트의 최상위 html 요소에는 컴포넌트의 이름으로 클래스명(.App)을 짓는다.
• 내부에서는 소문자로 클래스명(.logo)을 만든다.
• 태그를 이용해 클래스명을 아예 생략하는 방식도 있다.

 

 

 

 

---

 

 

 

'Sass 사용하기'

• Syntactically Awesome Style Sheets
• CSS 전처리기로 복잡한 작업을 쉽게 할 수 있게 해주고, 스타일 코드의 재활용성, 가독성을 높인 방법
  • 변수와 @mixin, 상위선택자 참조(&)등을 사용할 수 있다.
• .scss 와 .sass 확장자를 지원한다. (+ scss가 더 일반적으로 쓰인다.)
• node-sass 라이브러리를 설치해야 Sass를 CSS로 변환해준다.
• 라이브러리를 쉽게 불러와서 사용할 수 있다.

 

.sass

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-folor

 

 

.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-folor;
}

 

 

 

 

 

 

---

 

 

 

 

'CSS Module'

• CSS를 불러와서 사용할 때 클래스 이름을 고유한 값
• [파일이름]_[클래스 이름]__[해시값] 고유 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 것을 방지해주는 기술
• .modules.css 확장자를 사용하여 CSS Module이 적용된다.
• 전역적으로 사용되는 클래스의 경우 앞에 :global 키워드를 입력한다.
• className 라이브러리를 이용하면 CSS 클래스를 조건부로 설정할 때 유용하다. (Sass와 함께 사용하는 것도 가능!)

import React from "react";
import styles from "./CSSModule.module.css";
// import classNames from "classnames";

export default function CSSModule() {
  // export default function CSSModule({highligted, theme) {
  return (
    <div className={`${styles.wrapper} ${styles.inverted}`}>
      {/* <div className={cx("wrapper", "inverted")}></div> */}
      {/* <div className={classNames("MyComponent", { highlighted }, theme)}> */}
      {/* <div className={`MyComponent ${theme} ${highlighted ? 'highlighted' : ''}`}> */}
      {/* <div className={[styles.wrapper, styles.inverted].join(' ')}> */}
      Hi <span className="something">CSS Module</span>
    </div>
  );
}

 

 

 

 

---

 

 

 

'Classnames'

• classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리
• CSS Module을 사용할 때 이 라이브러리를 사용하면, 여러 클래스를 적용할 때 매우 편리하다.

import classNames from "classnames";

classNames("one", "two"); // = ‘one two‘
classNames("one", { two: true }); // = ‘one two‘
classNames("one", { two: false }); // = ‘one‘
classNames("one", ["two", "three"]); // = ‘one two three‘

const myClass = "hello";
classNames("one", myClass, { myCondition: true }); // = ‘one hello myCondition‘

 

'Sass와 함께 사용하기'

• Sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용하면 CSS Module로 사용 가능하다.

.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
  &.inverted {
    // inverted가 .wrapper와 함께 사용되었을 때만 적용
    color: black;
    background: white;
    border: 1px solid black;
  }
}
 
// 글로벌 CS
:global {
  // :global {}로 감싸기
  .something {
    font-weight: 800;
    color: aqua;
  }
}

 

'CSS Module이 아닌 파일에서 CSS Module 사용'

• :global을 사용했던 것처럼 CSS Module이 아닌 일반 .css/.scss 파일에서도 :local을 사용하여 CSS Module을 사용할 수 있다.

 

 

 

 

 

---

 

 

 

 

'styled-components'

• JS 파일 안에 스타일을 선언하는 방식
• 리액트에서만 사용이 가능하다.
• styled-components 라이브러리 설치해야한다.
• 스타일 코드 여러 줄을 props에 따라 넣어주어야 할 때는 css를 불러와서 입력해야 한다.
• props로 전달해주는 값을 쉽게 스타일에 적용할 수 있으며, 스타일링이 쉽다.

 

import React from "react";
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`
  /* props로 넣어 준 값을 직접 전달해 줄 수 있다 */
  background: ${(props) => props.color || "blue"};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  ${media.desktop`width: 768px`}
  ${media.tablet`width:100%`}
`;
/* @media (max-width: 1024px) {
  width: 768px;
}
@media (max-width: 768px) {
  width: 100%;
} */

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;
  /* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }
  /* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 줍니다 */
  ${(props) =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `}
  & + button {
    margin-left: 1rem;
  }
`;

export default function StyledComponent() {
  return (
    <Box color="black">
      <Button>Hi</Button>
      <Button inverted={true}>Only Outline</Button>
    </Box>
  );
}

 

 

 

 

 

---

 

 

 

'후기 및 정리'

• .scss는 라이브러리를 쉽게 가져와서 사용할 수 있고, 코드를 깔끔하게 관리할 수 있다는 장점이 있다.
• 다양한 리액트 컴포넌트 스타일링 방식이 있으며, 상황에 따라 선택해서 사용해야 한다.