React 라이브러리 중 가장 인기 있는 게 Styled-Component 입니다.
React의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다.
Styled-Component의 특징
-
Automatic critical CSS
Styled-Component는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다. -
No class name bugs
Styled-Component는 스스로 유니크한 className을 생성합니다. 이는 중복이나 오타로 인한 버그를 줄여줍니다. -
Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기 위해 CSS 파일 안의 className을 찾아야 했습니다. 하지만 Styled-Component는 모든 속성이 특정 컴포넌트와 연결되어 있기 때문에 컴포넌트를 사용하지 않아 삭제할 경우 스타일 속성도 함께 삭제됩니다. -
Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다. -
Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다. -
Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled-Component가 알아서 처리해 줍니다.
Styled-Component 설치
# with npm
$ npm install --save styled-components
# with yarn
$ yarn add styled-componentsCheckpoint 요약
Storybook?
Storybook은 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구입니다.
CSS-in-JS의 장점
- 다른 컴포넌트에 영향을 주지 않기 때문에 생성, 수정, 삭제가 자유롭습니다. (CSS-in-JS를 활용해 의존성을 낮출 수 있습니다.)
- CSS가 특정 컴포넌트에 종속되기 때문에 className이 겹치는 등의 부작용이 없습니다. (협업 뿐 아니라 유지보수에도 용이합니다.)
- CSS-in-JS는 필요한 부분만 style 태그를 생성해 로딩합니다.
- CSS-in-JS 라이브러리는 styled-components, glamorous, aphrodite등이 있고, styled-components가 인기 있습니다.
Styled-Component
- 스타일 속성 정의 시 CSS3 문법을 그대로 사용할 수 있습니다.
- 스타일 속성을 지닌 컴포넌트를 정의할 때 함수를 전달하고, 함수 안에서 props를 사용할 수 있습니다.
- 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled()로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다.
- 별도의 className을 지정해 주지 않아도 Styled-Components가 각 태그마다 유니크한 이름을 생성해줍니다.
(기타)
Styled-Components 사용 시 . 또는 ()중 하나만 사용해야 합니다.
ex) 잘못된 사용법
const Username = styled.(div)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
`;useRef에 대한 설명
- useRef는 DOM 엘리먼트의 특정 메소드를 활용해야 할 때 자주 사용됩니다.
- ref 속성을 활용해서 DOM 엘리먼트, React 엘리먼트의 주소값을 useRef의 리턴값에 전달할 수 있습니다.
