[TIL] 20230629 - styled-components ThemeProvider를 이용한 전역 스타일링 관리(feat.redux)

특강시간에 ThemeProvider를 이용한 전역스타일링 관리를 실습했다.

페어프로그래밍으로 실습을 진행했는데

팀원분중에 상당한 실력자분이 계셔서 아주 나이스하게 마무리했다.

styled-component에서 제공하는 ThemeProvider는 테마를 만들어 관리해줄 수 있는데

예를 들어 팀프로젝트에 포인트컬러, 서브컬러, 타이틀 사이즈등을 일괄적으로 정해두고 그걸 수정할 시에 한곳에서 수정하면 한번에 관리가 가능하다.

 

다크/라이트모드 관리

 

폰트컬러와 배경색을 지정해두고 다크모드/라이트모드 관리가 가능하다.

//첫번째 코드
const darkTheme = {
    backgroundColor: 'black',
    fontColor: 'white'
};

const lightTheme = {
    backgroundColor: 'white',
    fontColor: 'black'
};

const THEME_MAP = {
    light: lightTheme,
    dark: darkTheme
};

========>
// 두번째 코드
const colorTheme = {
    light: {
        backgroundColor: 'white',
        fontColor: 'black'
    },
    dark: {
        backgroundColor: 'black',
        fontColor: 'white'
    }
};

function App() {
    const [color, setColor] = useState('light');

    return (
         <ThemeProvider theme={THEME_MAP[theme]}>
            <button
                onClick={() => {
                    setTheme(theme === 'light' ? 'dark' : 'light');
                }}>
                테마
            </button>
            <StyleDiv>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/detail/:id" element={<Detail />} />
                </Routes>
            </StyleDiv>
        </ThemeProvider>
    );
}


const StyleDiv = styled.div`
    color: ${({ theme }) => {
        return theme.color.fontColor;
    }};
    background-color: ${({ theme }) => theme.color.backgroundColor};
`;

state를 이용해 기본 컬러스타일을 두고 set으로 스타일을 변경해준다.

첫번째 코드처럼 컬러별 Theme을 만들어도 되지만

두번째 코드처럼, colorTheme 을 만들어 객체형태로 저장해서 한번에 코드를 짤 수도있다.

 

---

팀프로젝트 4일째인데

바쁘다고 TIL제대로 못썻다 ㅠㅠ 반성중

팀에 피해안끼치려고 빨리하려고 .. 그랬는데 속도가 너무느리네 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

정말 큰일났다

맘은 급한데 정신은없고 기본기는 부족하고 시간은 더없고!!! 삽질은 끝이 없고 !!!!!

돌아버리겠네~