WIL 17주차 styled Component globalstyle / theme

style component는 react에서 css를 작성하는 방식 중 하나로 각 컴포넌트에 스타일을 직접 적용할 수 있습니다. 이를 통해 css의 전역 스코프와 충돌을 막을 수 있고, 컴포넌트의 재사용성을 높일 수 있습니다

globalstyle

styled-component에서 GlobalStyle을 사용하여 전체 페이지의 스타일을 지정할 수 있으며, 다른 컴포넌트에서도 전역적으로 적용할 수 있는 스타일을 작성

GlobalStyle 사용방법

1. styled-component 설치

yarn add styled-components

2. GlobalStyle 컴포넌트 작성

import {createGlobalStyle} from 'styled-components'

const GlobalStyle = createGlobalStyle`
	body{
    	~~~
    }
    h1{
    	~~~
    }
    
`

3. GlobalStyle을 컴포넌트에 추가

import {GlobalStyle} from "경로"

function App(){
	return(
    	<>
        <GlobalStyle/>
        <Router/>
        </>
    )
}

GlobalStyle 사용 이유

1. 전역 스타일 지정

GlobalStyle을 사용하면 페이지 전체에 일관된 디자인을 적용할 수 있습니다. 모든 컴포넌트에서 동일한 스타일을 사용할 수 있기 때문에 유지보수가 쉽고 일관성 있는 룩앤필을 구현할 수 있습니다.

2. 스타일 충돌 회피

GlobalStyle을 사용하면 스타일 충돌을 회피할 수 있습니다. 컴포넌트마다 스타일을 작성하면 클래스 이름이 중복될 수 있고, 스타일이 충돌할 가능성이 있습니다. GlobalStyle을 사용하면 이러한 문제를 예방할 수 있습니다.

1. 효율적인 스타일링

GlobalStyle을 사용하면 반복적인 스타일링 작업을 효율적으로 수행할 수 있습니다. 페이지 전체에서 일관된 디자인을 적용할 수 있으므로, 개발자가 작성해야 할 스타일 코드의 양을 줄일 수 있습니다.

theme

styled component에서 theme provider를 사용하여 전역적인 스타일 변수를 관리할 수 있습니다.

styled component theme 사용방법

1. theme provider 생성

import {ThemeProvider} from 'styled-components';

const theme = {
	color:{
    	primary:"#0070f3"
    }
};

function App(){
	return (
    	<ThemeProvider theme={theme}>
        	<component/>
        </ThemeProvider>
    )
}

2. theme 변수 설정

const theme = {
	colors:{
    	primary : "#0070f3"
    },
    fonts:{
    	body:"Helvetiva Neue"
    },
}

3. theme 변수 참조

import styled from 'styled-components'

const Button = styled.button`
	background-color:${props=>props.theme.colors.}
`

function component(){
	return <Button>Click</Button>
}

Styled Component Theme 사용 이유

1. 일관된 디자인 시스템 적용

Theme을 사용하면 일관된 디자인 시스템을 쉽게 적용할 수 있습니다. 모든 컴포넌트에서 동일한 색상, 글꼴 등을 사용하므로써 디자인의 일관성을 유지할 수 있습니다.

2. 유지보수성 향상

전역적인 스타일 변수를 관리함으로써 유지보수성을 향상시킬 수 있습니다. 스타일 변수가 변경되면 해당 변수를 참조하는 모든 컴포넌트가 동시에 변경됩니다.

3. 코드 중복 감소

각 컴포넌트에서 스타일을 작성하면 코드 중복이 발생할 수 있습니다. Theme을 사용하면 동일한 스타일을 여러 컴포넌트에서 재사용할 수 있습니다.