(SEB_FE) Section3 Unit3 styled-component 복습

PYM·2023년 4월 30일
0

(SEB_FE) SECTION3

목록 보기
17/22

🥪Styled-Component

과거에는 CSS 파일을 작성하는데 정해진 일관된 규칙이 존재하지 않았다.
하지만 점점 프로젝트의 규모나 복잡도가 점점 커지며 함께 작업해야 할 팀원 수도 많아지게 되고, 모바일이나 태블릿을 비롯한 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하면서 CSS에도 일관된 규칙의 필요성이 대두되기 시작했다.

이 문제를 해결하기 위해 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구인 CSS전처리기(CSS Preprocessor)라는 것이 생겨났다.

하지만 얼마 지나지 않아서 SASS가 ‘CSS의 구조화’를 해결해 주는 것의 장점보다 다른 문제들을 더 많이 만들어낸다는 것이 밝혀지고, CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두 된다.

세 방법론은 모두 같은 지향점을 가지고 있다.

  • 코드의 재사용
  • 코드의 간결화(유지 보수 용이)
  • 코드의 확장성
  • 코드의 예측성(클래스 명으로 의미 예측)

하지만 이러한 방법론들에서도 아래와 같은 문제점이 발생하기 시작한다.

  • 클래스명 선택자가 장황해지고,
  • 이런 긴 클래스명 때문에 마크업이 불필요하게 커지며,
  • 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했다.

방법론 역시 언어 로직 상에 진정한 캡슐화(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 개념이 없다는 것을 해결해 주지 못 했고, 이로 인해 개발자들은 유일한 클래스명을 선택하는 것에 의존할 수밖에 없었다.

이후 CSS도 컴포넌트 영역으로 들이기 위해서 CSS-in-JS가 탄생했고, 이 문제를 정확히 해결하게 된다.

🥪CSS-in-JS

기존의 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념

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

🥪Styled Components

CSS in JS 중, 가장 인기 많은 대표격 CSS-in-JS로,
기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터
UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공

🥐사용법

1. 설치 및 사용 준비

npm install --save styled-components 로 설치 후,

package.json에 아래 코드 추가 한 뒤,

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

사용할 js 파일에 아래 명령어로 import 해 주면 준비 완료
import styled from "styled-components"

2. Styled-Component의 문법

2-1. 기본 문법

import styled from "styled-components";

//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용
  return <BlueButton>Blue Button</BlueButton>;
}
  • 컴포넌트 선언 후, styled.태그종류를 할당하고, 백 틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해 주기.

  • 만든 컴포넌트를 React 컴포넌트를 사용하듯 리턴문 안에 작성하기.

2-2. 컴포넌트 재활용

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

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있다
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있다
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;
  • 컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해 준 다음, 추가하고 싶은 스타일 속성을 작성

2-3 Props 활용

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.

즉, 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 당연히 가능! (그걸 위해 내려 받는 거다!)

  • 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용
  • props를 받아오려면 props를 인자로 받는 함수를 만들어 사용
 //받아온 prop에 따라 조건부 렌더링이 가능
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}
  • Props로 조건부 렌더링하는 예시 코드
  • 삼항 연산자를 활용해 <Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없을 경우 white를 지정
//받아온 prop 값을 그대로 이용해 렌더링할 수도 있다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있다 
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
    </>
  );
}
  • Props 값으로 렌더링하는 예시 코드
  • props.color가 없다면 white를, props.color가 있다면 그 값을 그대로 가져와서 스타일 속성 값으로 리턴.

2-4. 전역 스타일 설정하기

import { createGlobalStyle } from "styled-components";

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

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}
  • Styled Components에서 createGlobalStyle 함수를 import 한다.
  • 이 함수를 사용해 CSS 파일에서 작성하듯 설정해 주고 싶은 스타일을 작성 한다.
  • 이렇게 만들어진 컴포넌트를 최상위 컴포넌트에서 사용
profile
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자

0개의 댓글