CDD (Component-Drivent Development)

조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 개발 진행

구조화된 CSS

CSS 전처리기 (CSS Preprocessor)

CSS가 구조적으로 작성될 수 있게 도움주는 도구

SASS (Syntactically Awesome Style Sheet)

CSS 전처리기 중 가장 유명한, CSS를 확장해 주는 스크립팅 언어
SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함 => 문제 발생(컴파일 된 CSS 용량이 너무 커져버림)

BEM & OOCSS & SMACSS

CSS 문제를 보완하기 위해 대두됨
3가지 모두 같은 지향점을 가짐

  • 코드의 재사용
  • 코드의 간결화 (for 용이한 유지보수)
  • 코드의 확장성
  • 코드의 예측성(클래스 명으로 의미 예측)

CSS-in-JS 등장

Styled-Component가 대표적
: 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴 제공

CSS 방법론의 장/단점

<출처: 코드스테이츠>


Styled Components

Styled Components 설치하기

터미널 명령어

//with npm
npm install --save styled-components

package.json에 다음 코드 추가

{
  "resolutions": {
    "styled-components": "^5"
  }
}

Styled Components를 사용할 파일로 불러오기

import styled from "styled-components"

Storybook

UI개발 즉, Component Driven Development를 하기 위한 도구
각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있음

Storybook이 지원하는 주요 기능

  • UI 컴포넌트들을 카탈로그화하기
  • 컴포넌트 변화를 Stories로 저장하기
  • 핫 모듈 재 로딩과 같은 개발 툴 경험 제공하기
  • 리액트를 포함한 다양한 뷰 레이어 지원하기

useRef

React 사용 시 DOM을 직접 건드려야하는 상황이 발생 시 사용할 수 있는 것

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>);

이 주소값은 re-render 되더라도 바뀌지 않음

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}
profile
oneThing

0개의 댓글