본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

React 앱에서의 스타일링 Overview

스타일링은 왜 중요할까?

• 직관적으로 보일 수 있다.

좋은 앱을 만들려면?

• 번들 사이즈에 대한 고려
  • CSS 코드가 차지하는 사이즈는 무척 중요한 요소
• 앱 성능에 대한 고려
  • 유저와의 상호작용에서 스타일 코드의 성능이 중요요소
• 사용자에게 유리한 UI/UX를 고려
  • 스타일링에 대한 지식으로 고급 테크닉을 적용
• 자바스크립트를 이용한 다양한 스타일 기법
• 유지보수가 용이하고 확장가능한 코드를 작성

React 앱에서의 스타일링 방법

CSS Import

특징

• CSS파일을 import해서 사용
• 필요한 모든 CSS 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리 가능
• import 'button.css'

장/단점

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

CSS module

특징

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

CSS-in-JS

특징

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

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를 선호한다.

CSS Position

• static : element는 normal flow에 따라 위치한다
• relative : normal flow를 따라 위치하되, 자기자신에 상대적으로 위치한다.
• absolute : normal flow에서 벗어나 가장 가까운 ancester에 상대적으로 위치한다.
• fixed : normal flow를 벗어나 viewport에 상대적으로 위치한다.
• sticky : normal flow를 따라 위치하되, 가장 가까운 scrolling ancester에 상대적으로 위치한다.

CSS Units

• px, pt, cm, in : 절대적인 길이를 표현하는 unit
• rem, em, % : 특정 값에 상대적인 길이를 표현하는 unit
• vw, vh, vmin, vmax : viewport에 상대적인 길이를 표현하는 unit

Sass

• SCSS, Sass 문법을 지원한다.
• styled-components는 Sass를 기본적으로 지원한다.
• $는 자기자신을 뜻한다.

CSS Flexbox

CSS Flexbox Model

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

CSS Flexbox properties - container

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

styled-components

styled-components

• 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용
• 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있다.
• 별도의 CSS 파일을 만들지 않ㄱ돋 하나의 파일 안에 스타일을 관리하고 싶을때 유리하다.
• 스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을 때 유리하다.