Styled-Component 사용하기, Styled Components 문법, 구조적이고 재사용성 높게 react 개발하는 방법, Styled-Component hover 효과 주기

CDD ( Component Driven Development )

➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식

➥ 재사용할 수 있는 컴포넌트를 개발한다. 

➥ 상향식 개발

 

Styled-Component (CSS-in-JS가 나오게 된 배경)

CSS 전처리기 ( CSS Preprocessor )

➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

 

* 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함)

➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다.

 

- CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어)

장점 : 스타일이 겹치는 문제를 해결할 수 있다. (변수를 선언해서 재사용 가능)

단점 : 용량이 커진다. 

 

- CSS 방법론의 공통된 지향점

* 코드의 재사용

* 코드의 간결화(유지 보수 용이)

* 코드의 확장성

* 코드의 예측성(클래스 명으로 의미 예측)

 

CSS 방법론으로 대두된 BEM, OOCSS, SMACSS 등등

단점 : 클래스명 선택자가 장황해지고, 캡슐화의 개념이 없다.

 

👇👇👇👇👇

애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. 

CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생했다. 

대표적으로 Styled-Component가 있다. 

 

장점 : 기능적 또는 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다. 

 

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴을 갖기 어렵다.  !important의 남용
SASS	프로그래밍 방법론을 도입해서 컴파일된 css를 만들어내는 전처리기	변수,함수,상속 개념을 활용해서 재사용 가능, css의 구족화	전처리 과정이 필요하고, 디버깅의 어려움이 있다.  컴파일한 css파일의 용량이 커짐
BEM	css 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결, 전처리 과정 필요없음	선택자의 이름이 장황해지고, 클래스 목록이 너무 많아짐.
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 css를 작성할 수 있게 도와주는 라이브러리	css를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없음	빠른 페이지 로드에 불리함.

 

---

Styled Components 라이브러리 => 리액트 환경에서 사용가능!!

CSS를 컴포넌트화 시킨다!!

 

아래와 같은 문제점 타파!! 🧨

--------------------------------------------------------------

1. class, id 이름 짓는데 시간이 많이 걸린다. 

2. css 파일 안에서 내가 원하는 부분 찾기 힘들다. 

3. css 파일이 너무 길어져서 파일을 쪼개거나 주석 처리하는 것이 번거롭다. 

4. 스타일 속성이 겹치는 바람에 내가 원하는 결과가 나오지 않는다. 

--------------------------------------------------------------------

 

                                                                                                                                                                                                              CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다.    

 

CSS in JS 라이브러리 중 현재 가장 인기 있는 라이브러리가 => Styled Components

 

Styled Components 의 설치 방법

 

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

 

package.json에 다음 코드를 추가 (추가 여부는 옵션이지만, 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.)   

 

{
  "resolutions": {
    "styled-components": "^5"
  }
}

           

Styled Components를 사용할 파일로 불러오기

 

import styled from "styled-components"

                           

---

Styled Components 문법

1. 컴포넌트 만들기

 

import styled from "styled-components";

const BlueButton = styled.button`
	background-color : blue;
    color : white;
`;

function App() {
	return <BlueButton>파란버튼</BlueButton>
}

export default App;

                                                       

이런식으로 나온다. 

 

 

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

컴포넌트를 선언하고 styled() 에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성해주기.

     

import styled from "styled-components";

const BlueButton = styled.button`
	background-color : blue;
    color : white;
`;

const RedButton = styled.button`
	background-color : red;
`;

function App() {
	return (
    	<>
        	<BlueButton>파란버튼</BlueButton>
            <br />
            <br />
            <RedButton>빨간버튼</RedButton>
        </>
	);
}

export default App;

                                                                                                                                                                                                                                                                                                                                               

이렇게 나온다. 

 

3. Props 활용하기

 

React 컴포넌트처럼 props를 내려줄 수 있고, 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.

1) Props로 조건부 렌더링하기

const Button = styled.button`
	background:${(props) => props.skyblue ? "skyblue" : "white"}
`;

<Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue, 없으면 white로 지정

 

<Button skyblue>버튼</Button>

이렇다면

이렇게 나온다.

 

 

import styled from "styled-components";

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <Button1 skyblue>Button1</Button1>
      <br/>
      <br/>
      <Button1>Button1</Button1>
    </>
  );
}

결과값

2) Props 값으로 렌더링하기

props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다.

 

꼭 삼항연사자를 쓸 필요 없다. 

 

import styled from "styled-components";

const Button1 = styled.button`
	backbround: ${(props) => (props.color ? props.color : "white")};
`;

const Button2 = styled.button`
	backbround: ${(props) => (props.color || "white")};
`;

export default function App() {
	return (
    	<>
        	<Button1>Button1</Button1>
     		<Button1 color="orange">Button1</Button1>
      		<Button1 color="tomato">Button1</Button1>
      		<br />
            <br />
      		<Button2>Button2</Button2>
      		<Button2 color="pink">Button2</Button2>
      		<Button2 color="turquoise">Button2</Button2>
        </>
    )
}

 

결과

 

 

4. 전역 스타일 설정하기

 

1. GlobalStyle 파일 새로 만들어서 아래 import 해주기

import { createGlobalStyle } from "styled-components";

2. 설정해주고 싶은 스타일 작성하기

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    	margin : 1px;
    	border-radius : 5px;
	}
`

3. <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해주기

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

 

---

hover 효과 주는 방법

 

import styled from "styled-components";

const NewButton = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
`;

const HoveringButton = styled(NewButton)`
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

export default function App() {
  return <HoveringButton>Practice!</HoveringButton>;
}

 

https://codesandbox.io/embed/upbeat-panka-6gpmdt?fontsize=14&hidenavigation=1&theme=dark

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓