React 프로젝트 생성하기
본인이 윈도우를 사용하고 있기에 모두 윈도우 기준임.
react를 이용해보려하는데, 초기 세팅을 어떻게 했는지 기록하기 위해 작성해본다.
이번엔 javascript로 초기세팅을 해봤다.
npx create-react-app my-app을 통해 my-app이라는 프로젝트를 만들어준다.
이때, 난 포트폴리오용으로 만들것이라서 portfolio라는 이름으로 프로젝트를 생성해주었다.
이후 실행이 제대로 되는지 확인해주기 위해서
cd my-appnpm start순으로 명령어를 입력해서 실행해본다.
React Router 설정하기
리액트 라우터 설정하기
사실 문서를 봐도 이해가 잘 안가서 다른 사람들이 사용한 방법을 찾아봤다.
react router를 사용하기 위해 다음 명령어를 입력해서 실행한다.
npm i react-router-dom그리고 최상단을 BrowserRouter로 감싸주어야한다.
여기서 최상단으로 본인은 index.js에 작성을 해주었다. 이미 Redux toolkit까지 설정한 뒤에 작성하는 것이라 아래처럼되어있다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { store } from './redux/store'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
</React.StrictMode>
);그리고 난 이후 본인의 경우에는 App.js에서 모든 route 경로를 설정해주었다.
포트폴리오를 위해 만드는 프로젝트이기에 메인 소개, 약력, 기술스택, 프로젝트의 경로를 만들어두었고, 이를 자유롭게 오가게 하기위해 router를 사용해보려한다.
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import MainComponent from './components/main/MainComponent'
import IntroductionComponent from './components/introduction/IntroductionComponent';
import ProfileComponent from './components/profile/ProfileComponent';
import ProjectComponent from './components/projects/ProjectComponent';
import TechstackComponent from './components/techstacks/TechstackComponent';
import './App.css';
function App() {
return (
<Routes>
<Route path='/' element={<MainComponent />} />
<Route path='/introduction' element={<IntroductionComponent />} />
<Route path='/profile' element={<ProfileComponent />} />
<Route path='/techstack' element={<TechstackComponent />} />
<Route path='/project' element={<ProjectComponent />} />
</Routes>
);
}
export default App;src/components/main/MainComponent.jsx의 코드는 우선 다음과 같이 만들어주었다.
(redux toolkit도 이미 완료되었기에 dispatch도 사용중이다.)
import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { Outlet, Link } from "react-router-dom";
import { decrement, increment } from '../../redux/slices/main/mainSlice';
function MainComponent() {
const count = useSelector((state) => state.mainSlice.value)
const dispatch = useDispatch()
return (
<div>
<p>메인페이지</p>
<p>
<Link to="/introduction">소개</Link>
</p>
<p>
<Link to="/profile">약력</Link>
</p>
<p>
<Link to="/techstack">기술 스택</Link>
</p>
<p>
<Link to="/project">프로젝트</Link>
</p>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
<Outlet />
</div>
);
}
export default MainComponent;
라우터를 사용하는 컴포넌트에서는 Link를 통해 위치를 이동할 수 있다. Outlet은 간단하게 표현하면 자식요소를 더 하나의 페이지에서 표현하게 하기 위함인데 이는 검색하면 잘알려주는 곳이 많으니 검색하면 금방 알 수 있으리.
Redux toolkit 설정하기
useState를 이용해서 변수들을 관리할 수도 있겠지만, 다른 페이지들에서 옮겨가면서 변수를 관리해야할 경우, 크기가 커질 경우 관리에서 복잡성이 증가하고, 효율이 떨어진다고 생각하기에 Redux를 이용하는데, 그 중 Redux toolkit으로 더 효율적으로 관리를 해보려한다.
우선 만들어진 프로젝트 내에서 react-redux를 설치해주고,
npm install react-reduxRedux Toolkit을 설치해준다.
npm install @reduxjs/toolkit2번 치기 귀찮다면 아래처럼 해도된다.
npm install @reduxjs/toolkit react-reduxRedux toolkit 공식문서에서는 이후
app/store.js에서
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {},
})를 만들어라고 한다.
하지만, 나는 src의 하위폴더로 redux폴더를 생성하고, 그 밑에 store.js를 생성해주었다.
src/redux/store.js에 만들어주었다.
그리고 마찬가지로
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {},
})를 넣어주었다.
추가로 이것만 설정해준다고 해서 store를 사용하는 것은 아니기에 나의 경우에는 src/redux/slices/main/mainSlice.js를 만들고
mainSlice.js를 다음처럼 작성해주었다.
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const mainSlice = createSlice({
name: 'mainSlice',
initialState,
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
export const { increment, decrement, incrementByAmount } = mainSlice.actions
export default mainSlice.reducer그리고 기존 src/redux/store.js는 아래와 같이 작성해주었다.
import { configureStore } from '@reduxjs/toolkit'
import mainSlice from './slices/main/mainSlice'
export const store = configureStore({
reducer: {
mainSlice: mainSlice
},
})그리고 index.js에는 공식문서에도 적혀있듯이
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)로 설정을 해주면된다.
하지만 나는 router도 같이 사용하기 때문에 index.js의 결과코드만 보면 다음과 같다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { store } from './redux/store'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
</React.StrictMode>
);만들어둔 src/components/main/MainComponent.jsx에서 아래와 같이 사용할 수 있다.
import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { Outlet, Link } from "react-router-dom";
import { decrement, increment } from '../../redux/slices/main/mainSlice';
function MainComponent() {
const count = useSelector((state) => state.mainSlice.value)
const dispatch = useDispatch()
return (
<div>
<p>메인페이지</p>
<p>
<Link to="/introduction">소개</Link>
</p>
<p>
<Link to="/profile">약력</Link>
</p>
<p>
<Link to="/techstack">기술 스택</Link>
</p>
<p>
<Link to="/project">프로젝트</Link>
</p>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
<Outlet />
</div>
);
}
export default MainComponent;아래 코드를 통해 store에 저장된 변수를 가져오고, 함수를 이용할 수 있다.
import { useSelector, useDispatch } from 'react-redux'변수를 가져오는 방법과 함수를 사용하기 위해서 사용하는 dispatch를 다음처럼 세팅한다.
const count = useSelector((state) => state.mainSlice.value)
const dispatch = useDispatch()그리고 아래처럼 사용해볼 수 있다.
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>이 정도로 적었놔도 따라만 해도 기본 세팅은 할 수 있을거라 믿는다.
그러면 Happy hacking!
