Styled component & global style

styled component 의 파워풀함은 component에 attr 를 전달하고, 속성값에 따라 스타일링을 변경 할 수 있다는 점에 있다.

const InputBoxWrap = styled.div`
  border: 1px solid #dee8ff;
  border-radius: 12px;
  width: 100%;
  height: auto;
  background-color: ${({ startdate }) => (startdate ? "#ffffff" : "#f2f6ff")};
  ${({ theme }) => theme.flex("center", "center", "column")};
  pointer-events: ${({ startdate }) => (startdate ? "auto" : "none")};
`;

예컨데, InputBoxWrap이라는 컴포넌트를 사용하면 (리듀서에서 상태값이 관리되고 있는)startdate 가 있을 때, 흰색에서 하늘색으로 background-color를 변경할 수 있다.

theme을 사용하면 dot-notation을 활용하여 global style 을 적용할 수도 있다.
global style의 경우 index.js (최상위파일)에서 import 하여 사용한다.

ReactDOM.render(
  <ThemeProvider theme={{ ...themes }}>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <GlobalStyle />
        <Routes />
      </PersistGate>
    </Provider>
  </ThemeProvider>,
  document.getElementById("root")
);

Routes를 감싸는 형태로 쓰며 가장 바깥쪽에 <ThemeProvider theme={{ ...themes }}>의 형태로 사용한다. redux 의 provider 를 import 하여 store 도 연결해준다.

  
    flex: (justify = null, align = null, direction = null) => css`
    display: flex;
    justify-content: ${justify};
    align-items: ${align};
    flex-direction: ${direction};
  `,

key-value 형태로 초기값을 null로 지정할 수 있다. value 값에 key 를 선언하는 형태로 들어오는 값에 따라 style을 지정할 수 있다.

styled component 의 활용방안은 계속해서 연구 중 이다.