ReactJS | Component Styling

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의 템플릿 리터럴을 사용하면 문자열과 변수를 같이 작성할 수 있기 때문에

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