[javascript] Redux와 CSS-in-JS의 연동 방법은?

22 Nov 2023

javascript

Redux는 React 애플리케이션의 상태 관리를 위한 강력한 도구이며, CSS-in-JS는 CSS 스타일을 JavaScript 코드로 작성하는 방식입니다. 이 두 기술을 함께 사용하면 React 컴포넌트의 상태와 스타일을 효과적으로 관리할 수 있습니다. Redux와 CSS-in-JS를 연동하기 위해서는 몇 가지 단계를 따라야 합니다.

Redux 설정하기 Redux를 사용하기 위해 애플리케이션의 상태와 액션을 정의해야 합니다. 이는 보통 store.js 파일에 작성됩니다. 다음은 예시입니다.
```
// store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;
```
위 예시에서 rootReducer는 모든 리듀서를 하나로 결합한 것입니다. 이것은 애플리케이션의 상태를 관리하는 데 사용됩니다.
CSS-in-JS 설정하기 CSS-in-JS를 사용하기 위해 해당 라이브러리를 설치한 후 스타일을 작성해야 합니다. 이는 보통 styles.js 파일에 작성됩니다. 다음은 예시입니다.
```
// styles.js

import { css } from '@emotion/react';

export const container = css`
  padding: 10px;
  background-color: #f0f0f0;
`;

export const button = css`
  padding: 8px 16px;
  background-color: #0066cc;
  color: #ffffff;
`;
```
위 예시에서는 @emotion/react 라이브러리를 사용하여 CSS를 작성하였습니다.

Redux와 CSS-in-JS 연동하기 Redux와 CSS-in-JS를 연동하기 위해 Container 컴포넌트를 만들어야 합니다. 이 컴포넌트는 Redux 상태를 Props로 받아 CSS-in-JS를 적용한 후 렌더링합니다. 다음은 예시입니다.

// Container.js

import React from 'react';
import { useSelector } from 'react-redux';
import { container, button } from './styles';

const Container = () => {
  const counter = useSelector(state => state.counter);

  return (
    <div css={container}>
      <button css={button}>{counter}</button>
    </div>
  );
};

export default Container;

위 예시에서 useSelector를 이용하여 Redux 상태값을 가져옵니다. 그리고 CSS-in-JS를 적용하기 위해 css 함수를 사용합니다.

이제 Redux와 CSS-in-JS를 연동하는 방법을 알았습니다. 위 예시를 참고하여 애플리케이션에서 적절하게 활용해보세요. 추가적으로 Redux와 CSS-in-JS에 대해 더 자세한 정보를 얻고 싶다면 아래의 참고 자료를 확인해보세요:

Redux 공식 문서: https://redux.js.org/
CSS-in-JS 비교: https://github.com/MicheleBertoli/css-in-js