프론트엔드 공부/React

Styled Components

먼저 Styled Components를 어떻게 쓰는지 이해가 잘 안되서 생활코딩을 통해 알아보고 시작!

유투브 생활코딩 style-component

Styled-Component 란?

Styled Components는 React 애플리케이션에서 컴포넌트 기반 CSS 스타일링을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 2016년에 Max Stoiber와 Glen Maddern에 의해 개발되었습니다.

Styled Components는 CSS-in-JS 스타일링 라이브러리 중 하나로 분류됩니다. 이것은 JavaScript 코드 내에서 CSS 스타일링을 작성할 수 있게 해주는 방식입니다. 이는 React 애플리케이션에서 컴포넌트 기반 스타일링을 수월하게 할 수 있으며, 여러 장점을 제공합니다. 예를 들어, Styled Components를 사용하면 CSS 클래스 이름 충돌과 관련된 문제를 피할 수 있으며, 재사용 가능한 스타일링 코드를 쉽게 작성할 수 있습니다.

설치 방법

Styled Components를 설치하려면, npm을 사용하여 다음과 같이 명령을 실행합니다.

# npm 사용시
$ npm install styled-components

또는 yarn 사용시 다음과 같이 명령을 실행합니다.

# yarn 사용시
$ yarn add styled-components

설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있습니다.

"dependencies": {
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "styled-components": "5.3.5"
  },

import 추가 하기(적용하고자 하는 components파일 상단에)

import styled from 'styled-components;'

Styled Components 문법

Styled Components를 사용하기 위해서는 먼저, styled 컴포넌트를 정의해야 합니다. 이를 위해, styled 함수를 사용합니다. styled 함수는 HTML 태그나 React 컴포넌트를 매개변수로 받아서, 스타일이 적용된 새로운 컴포넌트를 반환합니다.

styled 함수를 사용하여 스타일을 적용할 HTML 태그나 React 컴포넌트를 선택합니다.
백틱(`)을 사용하여 템플릿 리터럴 문자열을 작성합니다.
문자열 안에 CSS 코드를 작성합니다. 이때, JavaScript 표현식을 ${}로 감싸서 삽입할 수 있습니다.
만들어진 Styled Component를 변수에 할당합니다.

예를 들어, styled.div 함수를 사용하여 div 태그에 스타일을 적용하는 코드는 다음과 같습니다.

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: red;
  background-color: #f0f0f0;
`;

위의 코드에서는 styled.div 함수를 사용하여 div 태그에 스타일을 적용하고 있습니다. 그리고 백틱으로 감싼 문자열 내에 CSS 코드를 작성하고 있습니다. 이렇게 생성된 Styled Component는 StyledDiv 변수에 할당되고, 이후 React 컴포넌트에서 사용할 수 있습니다.

Styled Components는 이러한 문법을 활용하여, HTML 태그와 React 컴포넌트를 선택하고, CSS 코드를 작성하는 것으로 스타일링을 쉽게 할 수 있습니다. 이를 통해, 스타일과 컴포넌트를 함께 작성할 수 있어서 코드의 가독성과 유지 보수성이 높아집니다.

스타일 상속 / props 활용 / 글로벌스타일

Styled Components를 사용하면 다양한 방식으로 컴포넌트를 스타일링할 수 있습니다.

- 스타일 상속

Styled Components를 사용하면, 스타일을 다른 컴포넌트로부터 상속할 수 있습니다. 이를 통해, 스타일 코드의 중복을 줄일 수 있습니다.예를 들어, 다음과 같이 Button 컴포넌트를 정의하고, LinkButton 컴포넌트에서 Button 컴포넌트의 스타일을 상속할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
`;

const LinkButton = styled(Button)`
  background-color: #008CBA;
`;

위의 예제에서는 Button 컴포넌트를 정의하고, LinkButton 컴포넌트에서 Button 컴포넌트의 스타일을 상속하고 있습니다. 이를 통해, LinkButton 컴포넌트에서는 Button 컴포넌트에서 정의한 스타일을 그대로 사용하면서, 배경색만 다른 색상으로 변경하고 있습니다.

추가 예제로 이미 만들어진 styled.button 컴포넌트를 활용하여, 버튼에 적용될 공통 스타일을 미리 정의한 후, 이를 활용하여 다른 컴포넌트를 만드는 예제입니다.

import styled from "styled-components";

// 기본적인 버튼 스타일을 정의합니다.
const Button = styled.button`
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
`;

// 파란색 버튼을 위한 컴포넌트를 만듭니다.
const BlueButton = styled(Button)`
  background-color: blue;
  color: white;

  &:hover {
    background-color: navy;
  }
`;

// 빨간색 버튼을 위한 컴포넌트를 만듭니다.
const RedButton = styled(Button)`
  background-color: red;
  color: white;

  &:hover {
    background-color: darkred;
  }
`;

function App() {
  return (
    <>
      <Button>Button</Button>
      <BlueButton>Blue Button</BlueButton>
      <RedButton>Red Button</RedButton>
    </>
  );
}

export default App;

Button 컴포넌트를 먼저 정의하고, BlueButton과 RedButton은 Button 컴포넌트를 확장(상속)하여 새로운 스타일을 추가하고 있습니다. &:hover를 이용해 마우스 오버 상태에서 스타일이 바뀌도록 설정되어 있습니다. styled-components를 활용하면, 쉽게 컴포넌트를 만들고 재활용할 수 있습니다.

- props에 따른 동적 스타일링

props 값을 기반으로 동적으로 스타일을 적용할 수 있습니다. 이를 통해, 동일한 컴포넌트를 다양한 상황에서 사용할 수 있습니다. 예를 들어, 다음과 같이 Button 컴포넌트를 정의하고, props에 따라 배경색을 변경할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function App() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}

export default App;

위의 예제에서는 Button 컴포넌트의 배경 색상을 props로 전달된 값에 따라 동적으로 변경하고 있습니다. props.primary가 true이면, 배경 색상이 파란색으로 변경되고, 그렇지 않으면 회색으로 유지됩니다.

다음과 같이 간단하게 color props을 만들어 무지개색 버튼을 만들어 볼 수 도 있습니다.

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

const Button = styled.button`
  background: ${(props) => props.color || "white"};
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
  border: 1px solid #ccc
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button>no props color</Button>
      <Button color="red">Red</Button>
      <Button color="orange">Orange</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="green">Green</Button>
      <Button color="blue">Blue</Button>
      <Button color="indigo">Indigo</Button>
      <Button color="violet">Violet</Button>
    </>
  );
}

- 글로벌 스타일링

Styled Components에서는 글로벌 스타일링을 지원하며, 이를 위해서는 createGlobalStyle을 사용합니다. createGlobalStyle은 글로벌 스타일링을 적용하기 위한 컴포넌트이며, 이를 사용하면 모든 컴포넌트에서 사용할 수 있는 스타일을 정의할 수 있습니다.

다음은 createGlobalStyle을 사용하여 전체 앱에서 사용할 글로벌 스타일을 정의하는 예제입니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: orange; //바디 배경색 오렌지로 글로벌스타일 지정
  }
`;

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>
        {/* 내부 컴포넌트 */}
        <Button>Default Button</Button>
      	<Button primary>Primary Button</Button>
      </div>
    </>
  );
}

export default App;

위의 예제에서는 createGlobalStyle 함수를 사용하여, body 태그의 스타일을 설정하고 있습니다. 이후, GlobalStyle 컴포넌트를 사용하여 글로벌 스타일을 적용하고 있습니다. 이렇게 글로벌 스타일을 정의하면, 모든 컴포넌트에서 해당 스타일을 사용할 수 있습니다.

Component hover 넣는 법

버튼에 마우스를 올리면 색이 변하게 되는걸 글로벌스타일에 적용해보았습니다. (해당 예시는 위에 설명했던 글로벌스타일을 새로운 js파일로 만들어 별도로 구성하고 불러오는 식으로 되어있습니다.)

"&:hover"는 CSS에서 많이 사용되는 의사 클래스(pseudo-class) 중 하나입니다. 이 클래스는 마우스 커서가 요소 위에 위치할 때 적용되는 스타일을 지정할 수 있습니다.

"&:hover"를 스타일 컴포넌트에서 사용하면, 해당 컴포넌트를 호버할 때 적용되는 스타일을 정의할 수 있습니다.

CSS의 공식 문서에서 "&:hover"에 대한 내용은 다음 링크에서 확인할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

styled-components 라이브러리의 문서에서도 "&:hover"를 포함한 CSS의 다양한 문법을 확인할 수 있습니다.
https://styled-components.com/docs/basics#pseudoelements-pseudoclasses-and-nesting

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    button {
    padding : 20px;
    margin : 6px;
    border-radius : 5px;
    transition: ease 1s;
    
    // 호버 기능
     &:hover{  
        //font-weight : bold;
        background-color : pink;
        color : orange; 
        cursor: pointer;
    };
    },
`;

export default GlobalStyle;

import './App.css';
import styled from "styled-components"
import GlobalStyle from "./GlobalStyle";


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;
`;

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

function App() {
  return(
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
      <br />
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  )
}

export default App;

저작자표시 비영리 변경금지

'프론트엔드 공부 > React' 카테고리의 다른 글

useRef (0)	2023.02.22
[React] Custom Component 종합퀴즈 (0)	2023.02.22
React State & Props 종합 퀴즈 풀이 (0)	2023.01.27
React Map() 사용 (0)	2023.01.24
React Intro(리액트의 특징 JSX) (0)	2023.01.24

Contents

새소식

인기 검색어