JavaScript/React JS

ReactJS | Component Styling

pathas 2020. 2. 28. 11:06

Component Styling

CSS Styling

  1. 컴포넌트.js 파일에서 컴포넌트.css 파일을 import 하는 형식
  2. 중복되는 클래스명이 있으면 안 됨
    여러 개의 컴포넌트들은 웹팩을 통해 하나로 합쳐지는데
    중복되는 클래스명이 있으면 둘 중 하나가 덮어 쓰여짐
  3. SMACSS, BEM 과 같은 CSS 방법론을 적용할 수도 있고
    CSS Selector를 활요하는 방법도 있음

CSS Selector

CSS에서 스타일링을 원하는 html 요소(element, tag)를 선택하는 패턴

Selector 설명
.class class="class"인 요소를 전부 선택
.class1.class2 class1과 class2의 요소를 전부 선택
.class1 .class2 class1 내부의 class2 요소 전부 선택
#id id="id"인 요소 선택, id의 값은 전체 코드에서 유일해야 함
* 모든 요소 선택
element 모든 element 요소 선택
element1, element2 element1, element2 요소 모두 선택
element1 element2 element1 내부의 element2 요소 모두 선택
element1>element2 부모 태그가 element1인 element2 요소 전부 선택 
.outerClassName .innerClassName{
    css code;
}

※ outerClassName 클래스 요소 안의
innerClassName 클래스 요소에만 스타일이 적용되도록 제한을 검

CSS Module

CSS 클래스를 불러올 때 [파일 이름] _ [클래스 이름] _ [해쉬값]으로
고유한 클래스명을 부여하여 동일한 클래스명이 생기지 않게 하는 기술

  • CSS파일을 [파일 이름].module.css로 저장
  • 컴포넌트.js파일에서 import styles from "./[파일이름].module.css" 작성
  • js파일 내부의 className에 들어가는 값을
    {styles.클래스명}으로 작성
import styles from "./fileName.moudle.css";

const Component = () => {
    return (
    <div className={styles.className1}>
     <div className={styles.className2}>
     </div>
    </div>
    )
}

Sass Styling

CSS Pre-Processor

  • CSS의 코드를 획기적으로 줄여줄 수 있음
  • 코드 재사용성이 뛰어나고 복잡한 작업을 쉽게 할 수 있음
  • 가독성이 좋음
  • .sass, .scss 확장자 지원
    두 파일의 문법이 많이 다름
  • Sass를 사용하기 위해서는 node-sass 라이브러리가 필요함
    yarn: yarn add node-sass
  • css와 마찬가지로 모듈화 가능, 모듈화 형식도 css와 동일함

.scss 기초 문법

  • // 한줄 주석 사용 가능
  • 하위 클래스를 표시할 때는 상위 클래스의 { } 안에 하위 클래스 스타일 작성
  • &: 현재 블럭이 적용되는 셀렉터를 참조함
  • 자세한 내용은 공식 홈페이지 참고
    https://sass-lang.com/documentation

styled-components Library

CSS코드를 javascript 코드 내에 작성하는 스타일링 방법

  • 하나의 js파일에 스타일까지 모두 설정 가능
  • 이와 같은 라이브러리를 CSS-in-JS 라이브러리라 부르는데
    styled-components는 그 중 가장 많이 사용되는 라이브러리임
  • 라이브러리이므로 yarn을 통한 설치가 필요함
    yarn add styled-components
  • 컴포넌트.js 파일에 import styled from "styled-components"; 작성
  • 스타일된 컴포넌트를 다른 컴포넌트 내부에 사용함
import styled from "styled-components";

// 컴포넌트 생성 예제
const PhoneWrapper = styled.div`
    display: flex;
    flex-direction: column;
`;

styled-components 문법

  • styled.[요소명]을 통해 스타일링된 컴포넌트를 생성함
  • ES6의 Template Literal(``백틱) 문법 사용
  • 템플릿 리터럴을 사용하는 이유는
    스타일을 동적으로 적용하기 위함
  • 즉 전달받는 Props에 따라 다른 스타일링이 가능해짐

ES6 Template Literal

// 기존 방식
const func1 = name => {
    return "Hello" + name + "!";
}

// ES6의 Template Literal 방식
const func2 = name => {
    return `Hello ${name}!`;
}

컴포넌트를 스타일링하는 여러 가지 방법에 대해 알아보았습니다.

따로 디자인을 담당하는 팀이 있는 경우에는 보통 기본 CSS, SASS로 디자인을 하고

그렇지 않은 경우에는 모듈이나 CSS-in-JS 등의 선택지도 고려해 볼 수 있다고 합니다.

ES6의 템플릿 리터럴을 사용하면 문자열과 변수를 같이 작성할 수 있기 때문에

동적으로 출력 결과가 달라지게 할 수 있습니다.

저작자표시 (새창열림)