✅ Component Driven Development
CDD : 컴포넌트 주도 개발
- 부품 단위로 UI 컴포넌트를 만들어 나가는 개발
- 기본적인 컴포넌트 단위에서 UI View까지 상향식 조립 개발
- 같은 UI 컴포넌트 공유
- 재사용할 수 있는 UI 컴포넌트
✅ 구조적인 CSS 작성 방법의 발전
CSS 전처리기란?
⛔️ 등장 배경 : 프로젝트가 규모나 복잡도 상승 시 CSS를 작성하는 일관된 패턴이 없었다.
=> 문제 해결을 위하여 CSS 전처리기라는 개념 등장(CSS가 구조적으로 작성될 수 있게 도움을 주는 도구)
- 전처리기 중 하나의 종류 : SASS
- CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능
- SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기의 역할
- ❌ 단점 ❌ : ASS가 ‘CSS의 구조화’를 해결해 주는 것의 장점보다 다른 문제들을 더 많이 만들어낸다는 것이 밝혀짐
🤔 CSS 전처리기의 문제를 보완하기 위해..
BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었습니다.
각각의 장단점이 있으나 결국 세 방법론 모두 같은 지향점을 가지고 있습니다.
🟢 공통적인 지향점
- 코드의 재사용
- 코드의 간결화(유지보수)
- 코드의 확장성
- 코드의 예측성
❌ CSS 방법론의 문제점
-
클래스명 선택자가 장황해지고 마크업이 불필요하게 커짐.
-
재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 함.
-
언어 로직 상에 진정한 캡슐화의 개념이 없다는 것.
✅ Styled-Component의 등장(CSS-IN-JS)
애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. 하지만 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 한 번도 없었습니다. 결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결합니다.
✅ Styled-Component
❌ 기존 CSS 코드를 다룰 때의 단점
- class, id 이름을 짓느라 고민이 발생한다.
- CSS 파일 안에서 내가 원하는 부분을 찾기 힘들다.
- CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다.
- 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다.
👍 Styled Components
CSS를 컴포넌트화 시킴으로써 해결해주는 라이브러리.
React 환경에서 사용 가능한 라는 라이브러리
- 설치 방법
npm install --save styled-components
//package.json
"resolutions": {
"styled-components": "^5"
}- 예시 코드
const 컴포넌트 이름 = style(재활용할 컴포넌트)\`
추가할 css 속성1 : 속성값;
추가할 css 속성2 : 속성값;
`const StyleButton = styled.button `
background: ${(props) => props.color || "white"};
width: ${(props) => (props.size === "big" ? "200px" : "100px")};
height: ${(props) => (props.size === "big" ? "80px" : "40px")};
`;Props 활용
Props로 조건부 렌더링하기
- Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다.
- props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.
const Button = styled.button`
background: ${ (props) => props.skyblue ? "skyblue" : "white"}
`Props 값으로 렌더링하기
const Button = styled.button`
background:${(props)=> props.color ? props.color: "white"}
`;전역 스타일 설정하기
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`- 전역 스타일을 최상위 컴포넌트에 사용해주면 전역에 컴포넌트의 스타일이 적용된다.
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 적용하기</Button>
</>
);
}📖 StoryBook
- Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구
- 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
- 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.
❓ Storybook 과 같은 UI 개발 도구의 사용 이유
- Storybook은 기본적으로 독립적인 개발 환경에서 실행된다.
- 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
- 회사의 내부 개발자들을 위해 문서화를 하여 회사의 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용할 수 있다.
✅ useRef
- React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다고 배웠다.
- 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생
=> useRef 라는 Hook 함수
🖥️ 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>);- 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
- 이 특성을 활용하여 아래의 제한된 상황에서 useRef 를 활용할 수 있다.
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>);
}
매일매일