y.developer
[TIL] Day 29-1 Styled Components 본문
2023.11.14 화
기존에는 CSS 만을 통해서 스타일을 정했다.
하지만 React에서는 작성한 코드에 색을 입혀주는 방법이 더 다양하다.
그중에서도 컴포넌트에 스타일을 적용하는 방법에 대해서 알아보자.
Styled Components
- Css-in-JS : JS로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식
- props를 통해서 조건부 스타일링 가능
- 지역 스타일링 : 단, 해당 컴포넌트 내에서만 사용 가능
CSS-in-JS
스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 사입하는 스타일 기법이다.
기존에는 웹사이트를 개발할 때 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 관행으로 여겨졌었다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹 개발의 패러다임이 바뀌고 있다.
최근 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다.
따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 전부 작성하는 방법이 많이 사용되고 있다.
React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있다.
Styled Components는 이렇게 트렌드가 되고 있는 CSS-in-JS 라이브러리 중에서도 단연 가장 널리 사용되고 있는 라이브러리이다.
설치 및 사용 방법
패키지 설치
터미널에서 styled-components 패키지를 설치할 수 있다.
npm 또는 yarn을 통해서 설치할 수 있다.
$ npm i styled-components
$ yarn add styled-components
플러그인 설치
vscode styled components
styled components에서 css 코드를 작성 시 자동 완성이 제대로 작동을 하지 않아서 불편하다.
휴면 에러에 더 취약하고 버그가 발생할 확률이 높아진다.
해당 플러그인을 설치하면 ctrl + spacebar를 통해 해당 스타일 코드를 직접 나타내줄 수 있다.
자동완성 추천이 뜨면 tab을 통해서 선택할 수 있다.
1.7.8
자동완성 기능이 작동하지 않는다.
ex) display는 자동완성 추천이 뜨지만, tab를 눌러서 작성하면 뒤쪽에 : ; 는 추가되지 않음.
제일 최신 버전인 1.7.8이 아닌 1.7.5로 다운그레이드하면 해결된다는 말이 있지만 그대로...
해결 중...
불러오기
import styled from "styled-components"
사용
const HomeBox = styled.div`
flex-direction: column;
justify-content: center;
align-items: center;
`
//적용할 태그를 선언한 컴포넌트 이름으로 변경
function Home() {
return (
<HomeBox>
</HomeBox>
)
}다른 스타일 정의 방법들의 문제점 해결
SASS의 문제점
- CSS 클래스명에 대한 고민
- 가이드가 없으면 복잡해지는 구조
- 방대한 스타일 정보로 인한 스크롤 지옥
- CSS 클래스 조건부 스타일링
- 동적인 변화 표현에 한계
그렇다고 Inline Style을 사용하자니 우선순위의 문제, HTML 파일의 부피 증가, CSS 역할 분리가 모호함, media query, key frame, Pseudo selector 사용 불가 등의 문제가 있다.
Styled-components
- CSS in JavaScript 기술로, JavaScript내에 CSS를 작성하는 라이브러리
- 스타일 정의를 CSS파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
- 클래스명을 해시값으로 자동 생성하고, 클래스명 오염을 방지할 수 있음
- 자바스크립트의 동적인 값들을 온전하게 사용이 가능
기존 돔을 만드는 방식은 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와서 사용했지만,
styled-components 는 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것이 특징이다.
css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다.
Naming
태그별 Naming
div : '컴포넌트명'Box
section : 컴포넌트명'Section
ul : 컴포넌트명'List
li : 컴포넌트명'Item
p : 컴포넌트명'Paragraph
span : 컴포넌트명'Span or '컴포넌트명'Text
- 첫 문자 대문자
- PascalCase
- ex) HomeBox
Pro Tips
Props Driling vs Context API vs Redux
가벼운 프로젝트에서는 Props Driling, Context API를 활용하는 것이 더 효율적이다.
데이터를 처리해야 할 양이 많고 복잡하다면 Redux를 활용하는 것이 효율적. 그러나 무겁고 보일러 플레이트가 많다.
className Naming
kebab-case 사용
ex) className="home-outline"
자세한 내용은 바로 다음 포스팅에 기재되어 있음
useState, useEffect : 리액트 기초 :
React.memo, useCallback, useMemo : 중급 이상의 리액트 제작. 회사에서는 필수로 사용
3rd party (서드 파티)
어떠한 분야에서 처음 개발하거나 원천 기술을 가지고 있는 게 아닌, 원천 기술과 호환되는 상품을 출시하거나 해당 기술을 이용한 파생상품을 생산하는 자를 말한다.
일반적으로 하드웨어 생산자와 소프트웨어 개발자의 관계를 나타낼 때 사용한다.
하드웨어 생산자는 first party (퍼스트 파티), 소프트웨어 개발자는 3rd party (서드 파티)라고 불린다.
따라서 서드파티는 Plugin(플러그인), Lib(라이브러리), Framework(프레임워크) 등을 말한다.
어떠한 서비스를 진행하기 위해서 여러 가지 많은 기능들이 개발되는데, 각자 자기의 전문 분야를 개발하고 SDK로 제공해서 사용함으로써 더 효율적이고 빠른 개발이 가능하다.
하루를 마치며
React에서 많이 사용하는 Styled Components를 다뤄봤는데, 기존에 CSS를 작성하는 문법과는 비슷해서 코드를 작성하는 데에는 무리가 없었다.
하지만 아직 컴포넌트를 다루고, props를 전달해서 css에 js 문법을 적용하는 것이 익숙하지가 않다.
계속 사용해 보고 적응이 될 때까지 연습해야겠다.
오늘의 한 줄
코드에 색칠하기