Unit3 회고

[React]Custom Component

🔆 Component Driven Development

CDD🧐

CDD란 컴포넌트를 중심으로 개발 프로세스를 고정하는 개발 방법론이라고 하는데 이게 무슨 뜻일까? 쉽게 말하자면 컴포넌트 단위에서 시작해 컴포넌트들을 결합하여 페이지로 조립하는 bottom-up 방식으로 UI를 구축하는 과정이라고 할 수 있다. 이를 구현하면 컴포넌트의 재사용성을 극대화할 수 있다는 이점이 있다.
CDD

CSS-in-JS🖇

1. 구조화된 CSS의 필요성이 대두된 배경

• 프로젝트의 규모, 팀원 수, 복잡도 증가
• 다양한 디바이스의 등장

2. CSS 구조화를 위한 다양한 시도

• CSS 전처리기 등장
  • CSS 전처리기: CSS가 구조적으로 작성될 수 있도록 도움을 주는 도구로 기존 CSS 문제점을 프로그래밍 개념(변수, 함수, 상속 등)을 활용해 해결
  • 문제점
    • 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 CSS 전처리기에 맞는 컴파일러를 사용해야 함
  • SASS: SCSS 코드를 읽어 전처리한 다음 컴파일을 통해 전역 CSS 번들 파일을 만들어주는 전처리기 역할 수행
• CSS 방법론
  • CSS 전처리기의 문제점을 보완하기 위해 대두된 방법론
  • 지향점
    • 코드의 재사용성
    • 코드의 간결화(유지보수 용이)
    • 코드의 확장성
    • 코드의 예측성(클래스 명으로 의미 예측 가능)
  • BEM
    • Block, Element, Modifier로 구분하여 클래스명을 작성하는 대표적인 CSS 방법론
    • Block: 전체 블럭 요소
    • Element: 블럭 내 한 조각
    • Modifier: 블럭 요소의 속성
  • 문제점
    • 장황해진 클래스명 선택자
    • 진정한 캡슐화 개념 구현 불가
• CSS-in-JS 등장
  • CSS도 JS 파일 안에서 컴포넌트 단위로 개발할 수 있도록 하기 위해 등장한 개념
  • Style-Component: 대표적인 CSS-in-JS 라이브러리
    • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴 제공

3. CSS 방법론들의 특징, 장단점

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴 갖기 어려움 !important의 남용
SASS (preprocessor)	프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기	변수/함수/상속 개념을 활용하여 재사용 가능 CSS의 구조화	전처리 과정이 필요, 디버깅 시 어려움 거대해지는 컴파일한 CSS 파일
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결, 전처리 과정 불필요	선택자의 이름이 장황하고, 클래스 목록이 너무 많아짐
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없음	빠른 페이지 로드에 불리함

🔆 CDD 개발 도구

Styled Components📌

Styled components란 CDD를 구현할 수 있는 대표적인 개발 도구로 CSS를 컴포넌트화 해주는 라이브러리이며 React 환경에서 사용이 가능하다

사용 방법

• 라이브러리 설치

  # with npm
  $ npm install --save styled-components
  
  # with yarn
  $ yarn add styled-components

• package.json에 추가(여러 버전의 라이브러리가 설치되어 발생하는 문제를 줄여줌)

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

• Styled Components를 사용할 파일로 불러옴
  import styled from "styled-components"

Styled Components 문법
Templete Literals 문법 사용

• 컴포넌트 만들기

  const 컴포넌트이름 = styled.태그종류`
      CSS속성: 속성값;
  `

• 컴포넌트를 재사용하여 새로운 컴포넌트

  const 컴포넌트이름 = styled(재활용할 컴포넌트)`
      추가하거나 변경할 CSS속성: 속성값
  `

• Props 활용하기

  const 컴포넌트이름 = styled.태그종류`
      CSS속성: ${ (props) => 함수 코드 }
  `

  • 활용 상황
    • props로 조건부 렌더링하는 경우
    • props 값으로 렌더링하는 경우

• 전역 스타일 설정하기

  • createGlobalStyle 함수를 불러옴
    import { createGlobalStyle } from "styled-components";
  • createGlobalStyle 함수를 이용해 설정해주고 싶은 스타일 작성
    예시

    const GlobalStyle = createGlobalStyle`
      button {
          padding : 5px;
              margin : 2px;
              border-radius : 5px;
      }
    `

    • 만들어진 컴포넌트를 최상위 컴포넌트에서 사용

Storybook📖

Storybook이란 CDD를 구현하기 위한 대표적인 UI 개발 도구로 컴포넌트들을 문서화하고 관리할 수 있는 도구이다. 이를 이용하면 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업이 가능하다. 또한 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다.

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

🔆 UseRef

useRef🤓

useRef란 React로 앱 개발 시 DOM을 직접 조작해야하는 경우 사용되는 hook 함수로 DOM을 직접 조작해야하는 대표적인 상황으로 DOM 앨리먼트의 주소값을 활용해야 하는 경우가 있음

• 사용 상황 예시
  • focus
  • text selection
  • media playback
  • 애니메이션 적용
  • d3.js, greensock 등 DOM 기반 라이브러리 활용

사용 형식

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

• 주소값은 컴포넌트의 전 생애주기를 통해 계속 유지됨
  • 컴포넌트가 언마운트 되기 전에는 값을 계속 유지
  • useRef를 사용한 변수에 담겨진 주소값은 re-render 되더라도 바뀌지 않음
• 변경 시 렌더링 되지 않아야 하는 값을 다룰 때 유용

주의점

• 제시된 상황을 제외한 대부분의 경우 React의 문법을 벗어나 useRef를 남용하는 것은 부적절함
• 선언형 프로그래밍 원칙과 배치되므로 신중하게 사용할 것

출처: code states
참조: 별코딩-useRef

<오늘의 일기>
이번 유닛은 html,js 파일은 react를 통해 하나의 파일로 통제할 수 있는데 그렇다면 css 파일까지 하나의 파일 안에 다 같이 넣어줄 수 없는걸까라는 나의 물음표에 느낌표를 찍어주는 유닛이었다. styled-components를 통해 js 파일 내부에서 css를 만져볼 수 있다는 사실이 너무 신기했고 어려웠지만 그만큼 배우는 것도 많았다.
이번에는 과제 역시 만만치 않았는데 페어 활동을 같이 진행한 페어분에게는 끈기 있게 문제를 해결하려는 자세를 많이 배웠다. 문제의 원인을 하나하나 찾아보고 문제가 해결될 때까지 시도해보려는 모습을 보며 사소한 문제더라도 어떠한 문제를 해결하기 위해서는 끈기 있게 시도해보는 자세를 지니면 나중에 큰 문제를 마주했을 때도 해결할 수 있을 것 같다는 생각이 들었던 유닛이었다.