[엘리스sw] 11주차 1일 - React 스타일링

 

---

◆  React 스타일링 Overview

◆  React 앱에서의 스타일링 방법

◆  CSS, Sass

◆  CSS Flexbox

◆  styled-components

---

React 스타일링 Overview

 

좋은 앱을 만들려면?

• 번들 사이즈에 대한 고려 : CSS 코드가 차지하는 사이즈는 매우 중요한 요소
• 앱 성능에 대한 고려 : animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소
• 사용자에게 유리한 UI/UX를 고려 : 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영
• 자바스크립트를 이용한 다양한 스타일 기법 : UI 토글링, 애니메이션, 다크모드, 복잡한 UI 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦.
• 유지보수가 용이하고 확장 가능한 코드를 작성 : 스타일에 관련된 코드를 어떻게 작성하고 관리하는가에 대한 지식이 필요함.

---

React 앱에서의 스타일링 방법

스타일을 적용하는 방법 : CSS import, CSS module, CSS-in-js

 

CSS import

• CSS(혹은 SCSS, Sass) 파일을 import 해서 사용
• 필요한 모든 CSS 스타일을 하나의 파일에서 작성하여, 자바스크립트 파일과 코드 분리 가능함.

Button.jsx

import 'button.css'

function Button({ children }) {
	return (
    	<button className="button">
        	{children}
    	</button>
    )
}

button.css

.button {
	background-color: orangered;
    color: white;
    width: 140px;
    height: 40px;
}

 

장점과 단점

• 단순히 CSS 파일만을 import하여 사용할 수 있어 편리함.
• 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리하는 것도 가능함.
• CSS 파일은 분리할 수 있으나, namespace를 나눌 수 없음.
• 만일 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어씌워짐.

 

CSS import 문제점

InputWithButton.jsx

import "./input-with-button.css";

export function InputWithButton() {
	return (
    	<div className="container">
        	<input type="text" name="text" className="input" />
            <button className="button">test</button>
    	</div>
    );
}

이렇게 되면 의도하지 않게 기존 스타일까지 덮어쓰는 문제가 발생함.

이를 해결하기 위해 요소의 클래스명을 바꿀 수 있으나, 요소가 많아지면 일일히 이름을 변경하기 힘듦.

 

CSS module

• 하나의 CSS module 파일 안에 작성한 스타일은 하나의 파일 namespace로 관리함.
• class name 뒤에 겹치지 않는 hash를 붙임.
• 스타일이 겹치는 상황을 해결함.
• 두 단어 이상의 경우, class명을 camelCase로 이름을 지음.

InputWithButton.js

module.css 혹은 .scss

import styles from "./input-with-button.module.css";

export function InputWithButton() {
	return (
    	<div className={styles.container}>
        	<input type="text" name="text" className={styles.input} />
            <button className={styles.button}>Submit</button>
    	</div>
    );
}

 

CSS-in-JS

• 별도의 CSS 파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성함.
• 자바스크립트 문법을 그대로 활용하여 코드를 작성함.
• React 컴포넌트를 사용하는 것처럼 사용함.
• Sass 문법을 활용 가능함.

InputWithButton.js

import styled from "styled-components";

const Container = styled.div`
	background: rgba(0, 0, 0, 0.05);
    margin: 10px;
    padding: 5px;
`;

const Input = styled.input`
	border: none;
    background: white;
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.8);
    height: 40px;
`;

const Button = styled.button`
	background: blue;
    color: white;
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 140px;
 `;

function InputWithButton() {
	return (
    	<Container>
        	<Input />
            <Button>Styled Button</Button>
    	</Container>
    );
}

---

CSS, Sass

 

CSS Box Model

• CSS layout의 기본이 되는 모델
• content-box, padding-box, border-box, margin-box 순으로 하나의 element를 감싸고 있음.
• box의 타입은 inline, block 두 가지
• display: inline, display: inline-block, display: block으로 서로 다른 box type을 적용함.

 

box-sizing

• width, height는 디폴트로 content-box의 크기를 정의함.
• width: 100px으로 정의 시, content의 크기만 100px이 되며, padding, border의 크기는 100px에 추가됨.
• box-sizing: border-box로 box sizing의 방식을 변경할 수 있음.
• border-box는 padding, border를 width, height에 포함됨.
• 보통 이해하기 쉬운 레이아웃을 정의하기 위해 box-sizing:border-box를 선호함.

출처 : 엘리스SW트랙 강의

static	position의 default 값으로, element는 normal flow를 따라 위치함.
relative	normal flow를 따라 위치하되, 자기 자신에 상대적으로 위치함.
absolute	normal flow에서 벗어나 가장 가까운 ancestor에 상대적으로 위치함.
fixed	normal flow를 벗어나 viewport에 상대적으로 위치함.
sticky	normal flow에 따라 위치하되, 가장 가까운 scrolling ancestor에 상대적으로 위치함.

* containing block : static을 제외한 다른 position

 

CSS Units

px, pt, cm, in	절대적인 길이를 표현하는 unit - px : pixel size의 영향을 받음. - pt, cm, in : printable
rem, em, %	특정 값에 상대적인 길이를 표현하는 unit - rem : 루트를 기준 - em : 직계 부모를 기준
vw, vh, vmin, vmax	viewport에 상대적인 길이를 표현하는 unit

 

Sass

• Syntactically Awesome Style Sheets. CSS Preprocessor.
• SCSS, Sass 문법을 지원함.
• 모듈, 믹스인, nested style 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장.
• styled-components는 Sass를 기본적으로 지원함.

 

Sass & 

• &는 자기 자신을 나타내는 placeholder
• 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용함.

.reset-button {
	& .active {}
    & .disabled {}
    &:hover {}
    &:not(:first-of-type) {}
    & + & {}
    & ~ & {}
    & > button {}
}

 

Sass variable

• 믹스인, partial과 함께 Sass가 제공하는 코드 관리 방법 중 하나.
• 색상, 사이즈 등 자주 등장하는 값을 주로 변수로 사용함.

$color-red: red;
$color-white: #fff;

.reset-button {
	color: $color-red;
    &:hover {
    	color: $color-white;
    }
}

 

Sass nested style

• 별도의 class를 정의할 필요 없이, 하나의 block 안에 여러 CSS를 적용할 수 있는 방법.
• CSS specificity가 그대로 적용되므로, 너무 깊게 nested되면 스타일 유지보수가 힘듦. (2 depth 이상 지양)

$color-red: red;
$color-white: #fff;

.reset-button {
	color: $color-red;
	&:hover {
    	color: $color-white;
    }
    > button {}
}

 

Sass mixins, import, include

font-styles.scss

@mixins font-style-1 {
	font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.05;
}

usage.scss

@import './font-styles.scss'

.button {
	@include font-style-1;
    background: red;
}

---

CSS Flexbox

 

CSS Flexbox Model

• HTML element를 하나의 상자로 간주하고, 그 안에서 어떻게 내부 item을 배열할 것인가를 스타일하는 모델
• 1차원의 레이아웃을 디자인 하는 데 사용함.
• responsive design에 유리함.
• 가운데 정렬, 비율로 정렬 등을 처리할 떄 유리함.

출처 : 엘리스SW트랙 강의

• flex container : Flexbox 아이템을 담는 컨테이너
• flex Item : 컨테이너 안에 담긴 아이템
• flex axis : flex 아이템의 방향을 결정하는 축

 

container

• flex-direction : row, column 등의 방향을 결정
• justify-content : main axis에서의 정렬을 결정
• align-items : cross axis에서의 정렬을 결정
• flex-wrap : flex container 내부 item의 width를 합친 것보다 작아질 때, 어떻게 정렬할 것인지를 결정
  ex. no-wrap : 캐러셀 구현

 

item

• flex-grow : flex container가 커질 때 item이 얼마만큼 늘어날 것인지를 결정
• flex-shrink : flex container가 줄어들 때 item이 얼마마늠 줄어들 것인지를 결정
• flex-basis : 기준점이 되는 item의 크기 (width, height 대신 씀)
• justify-self : 한 아이템을 main-axis에 따라 어떻게 정렬할 것인지를 결정
• align-self : 한 아이템을 cross-axis에 따라 어떻게 정렬할 것인지를 결정
• order : flex container에서 item의 순서를 결정

 

CSS Flexbox 예시

.container {
	display: flex;
    justify-content: center;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

 

.container {
	display: flex;
    justify-content: center;
    align-items: center;
}

.three {
	align-self: flex-start;
}

.container {
	flex-direction: column;
    justify-content: center;
}

.item {
	width: 100%;
}

퍼센트는 부모의 크기에 따라서 계산됨.

 

.container {
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
	display: flex;
	align-items: center;
}

.one {
	flex: 1;
}

.two {
	flex: 0 0 120px;
}

flex: 0 0 120px의 의미 : 120px을 유지한다는 말임.

• 0 (첫번째) : flex-grow
• 0 (두번째) : flex-shrink
• 120px : flex-basis

---

 

styled-components

• 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용함.
• 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있음.
• 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리함.
• 스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을 때 유리함.
• tagged template literal이라는 문법을 활용함.
• CSS 코드에 post-css, minification, Sass 적용.
• CSS 코드를 겹치지 않게 처리함.
• 클래스 이름 자체가 hash

 

styled-components Example

function Sample() {
	return (
    	<Container>
        	<Button>Submit</Button>
        </Container>
    );
}

const Container = styled.div`
	width:: 400px;
    height: 400px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.3);
    `;
    
const Button = styled.button`
	background: orange;
    color: white;
    padding: 12px 40px;
    border: none;
`;

const List = styled.ul`
	display: flex;
    flex-direction: column;
`;

const ListItem = styled.li`
	padding: 20px 100px;
    background: orangered;
    color: white;
    
    & + & {
    	margin-top: 8px;
    }
`;