elice track ep.10

비지·2023년 11월 28일

JavaScript React redux styledComponent typescript 개발자국비지원 개발자부트캠프 국비지원부트캠프 리액트네이티브강좌 엘리스트랙 엘리스트랙후기 온라인코딩부트캠프 온라인코딩학원 프론트엔드국비지원 프론트엔드학원

엘리스트랙

목록 보기

10/22

React앱에서의 스타일링 Overview

좋은 앱을 만들려면

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

스타일 적용 방법

CSS import

CSS(혹은 SCSS, Sass) 파일을 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 파아ㅣㄹ을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성
자바스크립트 문법을 그대로 활용하여 코드를 작성
리액트 컴포넌트를 사용하는 것처럼 사용
Sass 문법 활용 가능

import styled from "styled-components";

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

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을 적용함

Sass

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

Sass &

&는 자기 자신을 나타내는 placeholder
기존 css의 selector 문법을 응용하여 복잡한 스타일을 적용
반복된 코드를 제거할 수 있음

.reset-button {
	&.active {}
    &.disabled {}
    & + & {}
	& ~ & {}
	& > button {}
}

CSS Flexbox

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

CSS Flexbox 기본개념

flex container - Flexbox 아이템을 담는 컨테이너
flex item - 컨테이너 안에 담긴 아이템
flex axis - flex 아이템의 방향을 결정하는 촉

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