[ReactJS] React 이론 공부 기초 - 4

 

좋은 앱을 만들기 위한 고려사항

• 번들 사이즈
  • CSS 코드가 차지하는 사이즈는 무척 중요한 요소임
  • 서버로부터 받아오는 파일들은 다양한데 크기가 클수록 페이지의 로딩 속도가 느려질 수 있음
• 앱 성능
  • animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요한 요소임
• 사용자에게 유리한 UI/UX
• 자바스크립트를 이용한 다양한 스타일 기법
  • UI toggling, anmation, 다크모드, 복잡한 UI 컴포넌트 등은 자바스트립트에 대한 지식만으로 구현하기 힘듦
• 유지보수가 용이하고 확장 가능한 코드를 작성해야함
  • 스타일에 관련된 코드를 어떻게 작성하고 관리하는 가에 대한 지식이 필요함

React 앱에서의 스타일링 방법

• CSS import : CSS(or SCSS, Sass) 파일을 import 해서 사용

장점	단점
- 필요한 모든 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를 감싸고 있음
    • width, heigth는 default로 content-box의 크기를 정의함
      • ex) width: 100px이면 content 의 크기만 100px이 되고, padding, border의 크기는 100px+a가 됨
    • box-sizing
      • border-box로 box-sizing 방식을 변경할 수 있음
      • border-box는 padding, border를 width, height에 포함함
      • 보통 border-box를 선호함
    • box 타입 : inline, block
    • display
      • inline
      • inline-block
      • block

출처 : 엘리스트랙 강의 자료

• CSS position
  • static : position의 default 값으로, element는 normal flow를 따라 위치함
  • relative : normal flow를 따라 유지하되, 자기 자신에 상대적으로 위치함
  • absoulte : normal flow에서 벗어나 가장 가까운 ancestor에 상대적으로 위치함
  • fixed: normal flow를 벗어나ㅏ viewport에 상대적으로 위치함
  • sticky: normal flow에 따라 유지하되, 가장 가까운 scrolling ancestor에 상대적으로 위치함
• CSS Units
  • px, pt, cm, in : 절대적인 길이를 표현하는 unit
  • rem, em, % : 특정 값에 상대적인 길이를 표현하는 unit
  • vw, vh, vmin, vmax : viewport에 상대적인 길이를 표현하는 unit
• CSS FlexBox Model
  • HTML element를 하나의 상자로 간주하고, 그 안에서 어떻게 내부 item을 배열할 것인지 정하는 모델
  • 1차원 레이아웃을 디자인하는데 사용
  • 반응형 디자인에 유리함
  • 가운데 정렬, 비율로 정렬 등 처리할 때 유리함
  • flex container : flex box 아이템을 담는 컨테이너
  • flex item : 컨테이너 안에 담긴 아이템
  • flex axis : flex 아이템의 방향을 결정하는 축

출처 : 엘리스 강의 자료

• Sass (Syntactically Awesome Style Sheets)
  • CSS Preprocessor로  SCSS, Sass 문법을 지원함
  • styled-components는 Sass를 기본적으로 지원함
  • module, mix-in, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장
    • "&" 
      • 자기 자신을 나타내는 placeholder
      • 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용함
    • variable 
      • mix-in, partial 과 함께 Sass가 제공하는 코드 관리 방법중 하나임
      • 색상, 사이즈 등 자주 등장하는 값을 주로 변수로 사용함
      • ex) $color-red : red; 
    • nested style
      • 별도의 class를 정의할 필요 없이, 하나의 block 안에 여러 CSS를 적용할 수 있는 방법
      • CSS의 specificity가 그대로 적용되므로, 너무 깊게 nested되면 유지보수가 힘듦 
  • Styled-components
    • 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용하는 것
    • 자바스크립트 코드와 긴밀하게 연결하여 다양한 코드를 작성 할 수 있음
    • 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리함
    • 스타일 코드와 컴포넌트 코드간의 결합을 나누고 싶을 때 유리함
    • "Tagged template literal" 문법을 활용
    • CSS 코드에 post-css, minification, Sass 적용할 수 있음

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript