Next.js와 Redux의 통합

18 Oct 2023

nextjs

Next.js는 React 기반의 SSR(Server-Side Rendering) 프레임워크로, Redux는 React 애플리케이션의 상태 관리를 위한 라이브러리입니다. Next.js와 Redux를 함께 사용하면 강력한 웹 애플리케이션 개발을 위한 도구를 손에 넣을 수 있습니다. 이번 블로그 포스트에서는 Next.js와 Redux를 어떻게 통합하는지 알아보겠습니다.

Redux 설정

먼저 Redux를 설정해야 합니다. Redux를 설치하려면 다음 명령을 실행하세요.

npm install redux react-redux

Redux를 설정한 후에는 store를 생성해야 합니다. store는 애플리케이션의 상태를 유지하고 업데이트하는 곳입니다. 보통 store.js 파일을 생성하고 다음 코드를 추가하세요.

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

const store = createStore(rootReducer);

export default store;

여기서 rootReducer는 애플리케이션의 모든 리듀서를 결합한 것입니다.

Next.js와 Redux의 통합

Next.js에서 Redux를 사용하려면 Provider 컴포넌트를 사용해야 합니다. Next.js의 pages 폴더에서 app.js 파일을 생성하고 다음 코드를 추가하세요.

import { Provider } from 'react-redux';
import store from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

이제 모든 페이지에서 Redux의 상태를 사용할 수 있습니다.

Redux 상태 사용하기

Redux의 상태를 사용하려면 connect 함수를 사용해 컴포넌트를 래핑해야 합니다. 컴포넌트를 생성하고 Redux의 상태를 사용하기 위해 connect 함수를 사용하는 예제 코드를 작성해보겠습니다.

import { connect } from 'react-redux';

function MyComponent({ counter }) {
  return (
    <div>
      <p>Counter: {counter}</p>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

export default connect(mapStateToProps)(MyComponent);

위의 예제에서 mapStateToProps 함수는 Redux의 상태를 컴포넌트의 props로 매핑하는 역할을 합니다. counter는 Redux의 counter 상태를 MyComponent 컴포넌트의 props로 전달하는 예입니다.

마무리

이제 Next.js와 Redux를 통합하는 방법을 알아보았습니다. Next.js에서 Redux를 사용하여 애플리케이션의 상태를 효과적으로 관리할 수 있습니다. Redux의 강력한 상태 관리 기능을 적용하여 Next.js 애플리케이션을 개발해보세요.

참고 자료

Next.js 공식 문서: https://nextjs.org/docs
Redux 공식 문서: https://redux.js.org/