1. CDD (Component Driven Development)

이전에 만든 UI 컴포넌트를 재사용 하기 위해 사용

부품 단위로 UI 컴포넌트를 만들어 나가는 개발 (상향식)

2. CSS in JS

CSS 작업을 효율적으로 하기 위해 사용

CSS 전처리기를 통해 CSS를 구조적으로 작성

CSS 구조화 하기 위한 방법론의 지향점

1. 코드의 재사용
2. 코드의 간결화(유지 보수 용이)
3. 코드의 확장성
4. 코드의 예측성 (클래스 명으로 의미 예측)

즉 JS 와 CSS를 다른 파일로 구분하기 않고 한번에 사용하기 위함

3. Styled Components

CSS를 컴포넌트화 시켜주는 라이브러리

앞서 말했듯 HTML + JS + CSS 하나의 파일로 묶어 컴포넌트 단위로 개발가능

npm install --save styled-components //를 통해 설치가능

//설치후 import 
import styled from "styled-components" 

1. 컴포넌트 만드는 법

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

백틱을 활용하여 CSS 작성

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

const 컴포넌트 이름 = styled(재사용할 컴포넌트)`
	추가할 CSS속성1 : 속성값; 
`;

4. 스토리북

각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트 작업 가능

애플리케이션 탐색없이 전체 UI를 보면서 개발 가능

테스트 및 개발 속도를 향상시키는 이점이 있고 애플리케이션 또한 의존성 걱정 안해도 됨

5. useRef

리액트에서는 DOM을 통한 수정은 하지 못한다.

하지만 useRef를 사용하면 가능

DOM 노드와 엘리먼트 그리고 React 컴포넌트 주소값을 참조 가능

하지만 useRef를 남용하는 것은 부적절! 선언형 프로그래밍 원칙에 위배되기 때문에 꼭 필요한 경우에만 사용하자