이번 글에서는 리액트를 활용하여 대시보드를 만드는 방법, React Router를 사용하여 페이지를 구성하는 방식, 그리고 Redux를 통해 상태 관리를 진행하는 방법에 대해 자세히 설명하겠습니다.
1. 프로젝트 설정
대시보드 프로젝트를 시작하기 전에 먼저 리액트 환경을 설정해야 합니다. Create React App을 사용하면 손쉽게 리액트 프로젝트를 생성할 수 있습니다.
npx create-react-app dashboard-app
cd dashboard-app
npm install react-router-dom redux react-redux
여기서는 react-router-dom을 사용하여 페이지 사이의 탐색을 구성하고, redux와 react-redux를 사용해 상태 관리를 처리할 것입니다.
2. 기본 구조 설정
먼저 프로젝트의 기본 구조를 설정합니다. src 디렉토리 아래에 components, pages, redux 디렉토리를 생성하겠습니다.
├── src
│ ├── components
│ ├── pages
│ └── redux
3. React Router 설정
React Router를 통해 사용자 인터페이스의 다양한 페이지 간의 탐색을 관리할 수 있습니다. src/App.js 파일을 열어 다음과 같이 수정합니다:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
function App() {
return (
);
}
export default App;
3.1 각 페이지(Component) 생성
이제 pages 디렉토리에 Home.js, About.js, NotFound.js 파일을 생성하고 간단한 내용을 추가합니다.
// src/pages/Home.js
import React from 'react';
function Home() {
return 홈 페이지
;
}
export default Home;
// src/pages/About.js
import React from 'react';
function About() {
return 소개 페이지
;
}
export default About;
// src/pages/NotFound.js
import React from 'react';
function NotFound() {
return 페이지를 찾을 수 없습니다.
;
}
export default NotFound;
4. Redux 설정
상태 관리를 위해 Redux를 사용할 것입니다. Redux는 중앙 데이터 저장소를 통해 상태를 관리하며, 이는 여러 컴포넌트 간에 일관된 상태를 제공합니다.
4.1 Redux 스토어 생성
먼저 redux 디렉토리 내에 store.js 파일을 생성합니다.
// src/redux/store.js
import { createStore } from 'redux';
const initialState = {
count: 0,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
const store = createStore(reducer);
export default store;
4.2 Redux 프로바이더 설정
이제 src/index.js 파일을 수정하여 Redux 스토어를 프로바이더로 감싸주겠습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
4.3 Redux를 사용하는 컴포넌트
이제 Redux 상태를 사용하는 컴포넌트를 만들어 보겠습니다. src/components/Counter.js 파일을 생성하고 다음과 같이 작성합니다.
// src/components/Counter.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
function Counter() {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
현재 카운트: {count}
);
}
export default Counter;
5. 대시보드 완성하기
대시보드 완성을 위해 이제 Home.js 페이지에 Counter 컴포넌트를 추가합니다.
// src/pages/Home.js
import React from 'react';
import Counter from '../components/Counter';
function Home() {
return (
홈 페이지
6. 스타일링 추가하기
대시보드에 약간의 스타일을 추가하여 더욱 보기 좋은 UI를 만들어 보겠습니다. src/App.css 파일을 수정하여 다음과 같은 스타일을 추가할 수 있습니다.
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 0;
}
h2 {
color: #333;
}
button {
margin: 5px;
padding: 10px 15px;
border: none;
background: #007bff;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #0056b3;
}
7. 최종 결과 확인하기
모든 설정을 완료하였으니 프로젝트를 실행해 보고 최종 결과를 확인해보겠습니다. 다음 명령어를 사용하여 개발 서버를 실행합니다.
npm start
브라우저에서 http://localhost:3000를 열고 대시보드와 각 페이지가 제대로 작동하는지 확인하세요. 카운터의 증가 및 감소 버튼을 눌러 상태가 잘 관리되고 있는지 실험해볼 수 있습니다.
결론
이번 강좌에서는 리액트로 대시보드를 만드는 기본적인 방법을 다루었습니다. React Router를 이용하여 페이지를 구성하고, Redux를 통해 상태 관리를 진행하는 과정을 배웠습니다. 이를 바탕으로 더 복잡한 애플리케이션도 손쉽게 구축할 수 있을 것입니다.
추가적으로 각 페이지에 다양한 컴포넌트를 추가하거나, 스타일을 보완하여 자신만의 대시보드를 완성해보세요.
참고 자료
아래는 리액트, Redux, React Router에 대한 공식 문서 링크입니다. 추가적으로 학습하시는 데 도움이 될 것입니다.