Project - Todo 2

오늘은 지난번 router와 비슷하게, styled-components에서의 색인 작업을 했다.

  • theming이라는 작업으로, 자주 사용하는 단위나 색상 등의 코드를 특정 값에 지정해두는 개념이다.
  • 사용할 값을 미리 정한 뒤 Provider를 이용해서 전역에 내려준다.
// theme.js
// 이런식으로 사용할 값을 미리 정한 뒤,
const theme = {
  color: {
    white: "#ffffff",
    black: "#000000",
  },
};


import theme from "./theme.js";
/*   */
return (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);

// 이런 스타일로 작성..

또한, 모든 라이브러리 등의 공식문서는 전부 알지는 못하더라도 '어떤' 내용을 지원하는지 전부 읽고 작업에 들어가는 버릇을 들여야 한다는 것도 배웠다.
지금 당장은 사용하지 않는 기능일지라도, 나중에 새로운 기능을 찾게될때 이미 사용하던 라이브러리에서도 지원하는 기능일 수 있기 때문이다.

좋은 웹페이지 즐겨찾기