230303 - React - styled-components, css, ThemeProvider

오늘 내가 배운 것

styled-components

1. CSS 함수, props 활용하여 동적으로 관리

2. ThemeProvider

 

 

1. CSS 함수, props 활용하여 동적으로 관리

리엑트에서 CSS 적용하는 방법으로 `styled-components`를 사용했는데, CSS를 적용시키다 보면 공통된 CSS 내용이 있다.

그러면 조금 간결하게 사용하기 위해서 공통된 내용을 css 함수를 이용하여 따로 뽑아서 사용할 수 있다.

 

import styled, { css } from "styled-components"

const flexCenter = css`
    display: inline-flex;
    justify-content: center;
    align-items: center;
`

const Button = styled.button`
    ${flexCenter}
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: bold;
    padding: 7px 14px;
`

const Div = styled.div`
    ${flexCenter}
    border: 1px solid #000;
    font-size: 24px;
    padding: 7px 14px;
`

 

위와 같은 방법으로 공통된 CSS 속성이 있다면 따로 관리하여 다른 컴포넌트에서도 재사용할 수 있다.

이를 이용해서 동적으로 CSS를 적용하는 방법도 있다.

 

//상위 컴포넌트
return <Components fullWidth>





//하위 컴포넌트
const fullWidthStyle = css`
    ${({ fullWidth }) => {
        return (
            fullWidth && //fullWidth 가 있을 때
            css`
                width: 100%;
            `
        )
    }}
`

 

이 방법은 컴포넌트의 Props와 css함수를 이용해서 css를 동적으로 관리하는 것인데, 컴포넌트에 fullWidth를 props로 받아서 fullWidth 가 있거나 true 일 때 css함수 내 css 속성을 적용시키는 방법이다.

 

 

2. ThemeProvider

`styled-components`의 컴포넌트 중 하나로, 전역 테마 데이터를 사용할 수 있다.

이전까지 사용했던 root와 비슷한 역할을 한다고 생각하면 쉽다.

`ThemeProvider`을 이용하여 모든 컴포넌트에서 사용할 CSS를 정해주고 이를 이용하여 하위 컴포넌트들에서 참조해서 사용하게 되면 일관된 스타일을 유지할 수 있다.

`ThemeProvider`를 사용되어 하위에 있는 모든 컴포넌트에서 사용할 수 있게 되고 이를 이용한 트리구조를 보면 아래와 같다

 

const themes = {
    // 테마데이터
}

return (
    <ThemeProvider theme={themes}>
        <App>
            <Header />
            <Content />
            <Footer />
        </App>
    </ThemeProvider>
)

 

이런 트리구조로 react를 구성하게 되면 App, Header, Content, Footer의 컴포넌트에서 theme을 이용하여 일관된 css스타일을 이용할 수 있다.

 

2-1. 사용 예시

App.jsx

import React from "react"
import Main from "./pages/main"
import { ThemeProvider } from "styled-components"

const App = () => {
    const colorChip = {
        blue: "#228be6",
        gray: "#adb5bd",
        pink: "#f06595",
    }
    return (
        <>
            <ThemeProvider theme={colorChip}>
                <Main />
            </ThemeProvider>
        </>
    )
}

export default App

 

Main.jsx

import React from "react"
import styled from "styled-components"

const Main = () => {
    return (
        <Div>
            <Title>Hello World!</Title>
            <Button>Click me!</Button>
        </Div>
    )
}

const Div = styled.div`
    background-color: ${({ theme }) => theme.blue};
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
`

const Title = styled.h1`
    font-size: 3rem;
    color: ${({ theme }) => theme.gray};
`

const Button = styled.button`
    background-color: ${({ theme }) => theme.pink};
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-top: 2rem;

    &:hover {
        background-color: ${({ theme }) => theme.blue};
    }
`

export default Main

 

 

---