React StyleComponent

React StyleComponent

• Component-Driven Development (CDD) : 부품 단위로 UI Component를 만들어 가는 개발
• Storybook : CDD를 하기 위한 도구이며 컴포넌트 탐색기
  • 주요기능
    • UI Component들 카탈로그화 하기
    • Component 변화를 Stories로 저장
    • 핫 모듈 재로딩과 같은 개발 툴 경험을 제공
    • View 레이어 지원
• CSS Preprocessor (CSS 전처리기) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
• CSS 구조화
  • 목적
    • 코드의 재사용
    • 코드의 간결화 (유지보수 용이)
    • 코드의 확장성
    • 코드의 예측성 (클래스 명으로 의미 예측)
  • BEM (Block, Element, Modifier) : Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법으로, 각각__와 —로 구분
    
  • CSS 방법론들의 특징 및 장단점

    	특징	장점	단점
    CSS	기본적인 스타일링 방법	-	일관된 패턴을 갖기 어렵다
    !important 남용
    SASS	프로그래밍 방법론을 도입하여 컴파일된 CSS를 만들어 내는 전처리기	변수, 함수, 상속개념 활용으로 재사용 가능
    CSS구조화	전치과정 필요

    디버깅의 어려움
    컴파일한 CSS파일의 크기가 거대 |
    | BEM | CSS클래스명 작성에 일관된 패턴을 강제하는 방법론 | 네이밍으로 문제를 해결하며 전처리 과정 X | 선택자의 이름이 장황하고 클래스 목록 증가 |
    | Styled-Component
    (CSS-in-JS) | 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리 | CSS를 컴포넌트 안으로 캡슐화
    | 빠른 페이지 로드에 불리 |
• Styled Componet
  • 특징
    • Automatic critical CSS
      Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.
    • No class name bugs
      Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.
    • Easier deletion of CSS
      기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.
    • Simple dynamic stylingclassName을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.
    • Painless maintenance
      컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.
    • Automatic vendor prefixing
      개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

useRef

• React에서 DOM엘리먼트의 주소값을 활용해야 하는 경우 useRef사용
  - focus
  - text selection
  - media playback
  - 에니메이션 적용
  - d3.js, greensock 등 DOM 기반 라이브러리 활용

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

• State : UI에 동적으로 표현될 데이터
  • 로컬 : 특정 컴포넌트 안에서만 관리되는 상태
    • form, input box, select box 등..
  • 전역 : 프로덕트 전체 또는 여러 컴포넌트에서 관리되는 상태
    • Dark / Light Mode, Globalization 등...
  • 상태관리를 위한 툴 (전역 상태 저장소 제공)
    • React Context
    • Redux
    • MobX
  • Side Effect : 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인
    • ex) 네트워크 요청, API호출
  • 전역 상태에서의 데이터 무결성
    • 데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정을 제한하여 안정성을 저해하는 요소를 막으며 데이터 상태들을 항상 옳게 유지
    • 방법 ⇒ Single source of truth : 동일한 데이터는 항상 같은 곳에서 데이터를 가져온다