타입스크립트 리액트 프로젝트 세팅

최초 작성 : 2025-09-17

최종 업데이트 : 2025-09-17

---

1) Vite 프로젝트 생성

 먼저 폴더를 만들고, 아래와 같이 프로젝트를 생성한다.

npm create vite@latest .

 터미널에서 위 명령어를 통해 프로젝트를 세팅할 수 있다. 프레임워크로는 리액트, 언어로는 타입스크립트를 선택한다.

npm install

 vite를 통한 설치가 완료되면 위의 명령어로 의존성을 설치한다.

---

2) 폴더 정리

 먼저 App.tsx의 기본 내용을 지우고, App.css와 index.css의 내용도 전부 지워준다.

 그 다음으로 해야 하는 것은 폴더 구조를 정리하는 것이다. 규모가 크다면 FSD 폴더구조를 고려해볼 만하지만, 간단한 프로젝트라면 타입별로 폴더구조를 만들어 놓는다.

assets, components, pages, hooks, styles를 기본으로 필요에 따라서 폴더를 추가한다.

---

3) 라이브러리 설치

npm install react-router-dom @reduxjs/toolkit react-redux styled-components axios

react-router-dom : 라우팅 기능 구현

@reduxjs/toolkit, react-redux : 리덕스 툴킷

styled-components : 스타일 관리

axios : API 통신

※ styled-components는 이제 레거시로 전환되었으므로, 스타일 관리는 다른 방법을 찾아볼 것이 권장됨.

---

4) main.tsx, App.tsx 세팅

main.tsx는 프로젝트를 위한 환경을 준비해 주는 곳으로, 각종 Provider 세팅을 해 준다.

import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from './store.ts';

<Provider store={store}>
	<BrowserRouter>
        <App />
    </BrowserRouter>
</Provider>

App을 BrowserRouter로 감싸 주고, 그 위를 Provider로 감싸 준다. store는 import 해서 가져온다.

import { Routes, Route } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
    return (
        <>
        	<Header />
        	<Routes>
            	<Route path="/" element={<HomePage />} />
            	<Route path="/about" element={<AboutPage />} />
            	<Route path="/*" element={<NotFoundPage />} />
        	</Routes>
        	<Footer />
        </>
    )
}

App.tsx는 기본이 되는 UI를 설정해 주는 곳으로, Routes와 Route를 통해서 라우팅 기능을 구현한다. path는 url 주소를, element는 해당 url로 접속했을 때 보여줄 페이지를 넣는다.

<Routes>
	<Route path='/' element={<Layout />}>
    	<Route index element={<HomePage />} />
    	<Route path='about' element={<AboutPage />} /> 
    </Route>
</Routes>

 Route를 중첩해서 쓰는 라우터 중첩(Nested Routes)을 사용할 수도 있다. 이 경우에도 동일하게 Route에 path와 element를 작성해 주면 되는데, 각각의 path는 상대 경로로 적어주고 인덱스 경로가 되는 건 path 대신 index를 적어 준다.

 이 경우에는 부모 Route의 element 안에서 <Outlet />을 사용해 주어야 한다. Outlet은 import { Outlet } from 'react-router-dom'으로 가져온다.

---

5) 리덕스 툴킷 세팅

 리덕스 툴킷을 사용하기 위해서는 store.ts 파일과 slice.ts 파일을 작성해줘야 한다.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../slices/counterSlice';

const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
});

export default store;

 store.ts파일은 위와 같이 작성한다. configureStore 함수를 이용해서 store를 만드는데, 이를 통해 여러 state를 관리한다.

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: number },
    reducers: {
        increment(state) {
            state.value += 1;
        },
        decrement(state) {
            state.value -= 1;
        },
    },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

 slice.ts 파일은 위와 같이 적어준다. createSlice를 통해서 slice를 만들 수 있는데, slice는 하나의 상태와 그와 관련된 로직을 묶어주는 단위이다.

 name은 slice의 이름이고, initialState는 해당 slice가 관리하는 상태의 초기값, reducers는 상태를 변경하는 함수들의 집합이다.

---