공통 스타일 속성 관리

공통 스타일 관리 하는 이유

• 매 컴포넌트가 증가함에 따라 스타일 코드의 일관성이 떨어 진다. -> 유지보수 비용의 증가
• 스타일 속성값들이 중구난방이라 어떤 속성을 갖고 있는지 코드로 확인이 어렵다. -> 협업에서의 문제
• 스타일마다 다른 속성을 갖고 있어서 재사용이 불가능하다 -> 비효율성 증가

이런 문제점을 styled-components를 사용한다면 contextAPI를 통해 한 번에 해결할 수 있다.

ThemeProvider

styled-components는 ThemeProvider 를 통해서 강력한 theming 전략을 제공한다.
context를 사용해서 모든 리액트 컴포넌트에게 theme 속성을 전달하는 역할을 수행한다.

1. App.jsx

import {ThemeProvider} from 'styled-components'

const theme = {
	color:red
}

const App = () => {
	return (
    	<ThemeProvider them={them}>
            <Test/>
      	</ThemeProvider>
    )
}

App 컴포넌트에서 최상단의 태그가 이므로 하위 자식의 모든 컴포넌트는 의 props로 넘어가는 thme 값을 사용할 수 있게 된다.

2. Test

import styled, {ThemeProvider} from 'styled-components';
  
  const Button = styled.button`
  	background-color : ${(props)=>props.theme.color}
  `
  
  const Test = () =>{
   	return (
  		<Button>버튼 테스트</Button>
  	)
  }