Component Develop
Component Driven Development
여러 팀과 같은 UI Component를 공유한다면 Component 단위 개발이 중요합니다. 재사용할 수 있는 UI Component를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있습니다.
부품 단위로 UI Component를 만들어 나가는 개발을 진행할 수 있습니다.
시간이 없으면 Styled-Component부터 보자..
구조적인 CSS 작성 방법의 발전
SASS는 CSS를 확장해주는 스크립팅 언어입니다.
즉, CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 가졌습니다.
- SASS의 문제점: 스타일이 겹치는 문제를 해결하기 위해 단순 계층 구조를 만들어 내는 것에 의지하고, CSS의 용량이 커지게 됩니다.
CSS 방법론
- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
CSS방법론으로 BEM이 있습니다.
BEM이란 Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며 HTML, CSS, SCSS 파일에서도 일관된 코딩 구조를 만들어 줍니다.
- 방법론 문제점: 긴 클래스명 때문에 마크업이 커지고, 재사용 할 때마다 UI컴포넌트를 명시적으로 확장해야만 했습니다.
Styled-Component
Styled-Component는 기능적(Functional)혹은 상태를 가진 Component들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공합니다.
Styled-Component 장점
React의 Component 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생했습니다. 기존 CSS 문법으로 스타일 속성이 추가된 React Component를 만들 수 있습니다.
-
Automatic critical CSS
화면에 어떤 Component가 렌더링 되었는지 추적해서 해당하는 Component에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다. -
No class name bugs
스스로 유니크한 className을 생성합니다. 중복이나 오타로 인한 버그를 줄일 수 있습니다. -
Easier deletion of CSS
Styled-Component는 모든 스타일 속성이 특정 Component와 연결되어 있기 때문에 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다. -
Simple dynamic Styling
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 Component에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다. -
Painless maintenance
Component에 스타일을 상속하는 속성을 찾아 다른 CSS파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.
Styled-Component는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props를 사용할 수도 있습니다.
또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우가 있습니다. 이때는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled()로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다.
Passed props
Component에 props로 스타일 속성이 전달된다면 해당 컴포넌트는 props로 전달된 속성을 우선 적용하며, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용합니다. styled component가 개발자에 의해 설정된 속성과 기본 속성을 구분할 수 있기 때문입니다.
Dom reference를 활용할 수 있는 useRef
React로 모든 개발 요구 사항을 충족할 수는 없습니다. 따라서 DOM Element의 주소값을 활용해야 하는 경우가 있습니다.
Styled-Component
Styled-Component의 정의는 리턴문 밖에서 이루어져야 합니다. Styled-Component가 리턴문 안에서 정의되면 Component가 리렌더링 될 때마다 스타일 속성을 지닌 Component가 새로 정의되고 렌더링 속도 저하를 일으킵니다.
/* Best Practice */
const StyledWrapper = styled.div`
/* ... */
`
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>
}
