reactJS + typescript 프로젝트 만들기

✅ 리액트 프로젝트 생성

아래의 명령어로 타입스크립트를 사용하는 리액트 프로젝트를 생성한다.

npx create-react-app my-app --template typescript

프로젝트 폴더(cd my-app)으로 이동하여 npm start 명령어를 입력한다.

localhost:3000 으로 접속하여 리액트 프로젝트가 정상적으로 실행되었음을 확인한다.

실행화면

✅ 리액트 프로젝트 생성

해당 게시물은 react-router v6버전에 맞게 사용법을 변경하여 작성하였다. 맨 하단의 참고 링크를 들어가면 v5에서 v6로 바뀌면서 어떤 부분들이 바뀌었는지 상세하게 알 수 있다.

App.tsx

import React from 'react';
import {Navigate, Route, Routes} from 'react-router';
import Layout from './component/layout/Layout';
import Error from './component/Error';
import Project from './screens/Project';
import ProjectDetail from './screens/ProjectDetail';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Navigate replace to="/project"/>}/>
      <Route path="/project/*" element={<Layout />}>
        <Route path="" element={<Project/>}/>
        <Route path=":projectId" element={<ProjectDetail text="test 문구입니다! <3"/>}/>
      </Route>
      <Route path="/error" element={<Error />}/>
    </Routes>
  );
}

export default App;

프로젝트가 실행되면 가장 먼저 작동하는 App.tsx에서 기본 라우팅을 설정해준다.

여기서 기본 루트인 localhost:3000/ 으로 접속했을 때 localhost:3000/project로 가도록 리다이렉트 해준다.

<Route path="/" element={<Navigate replace to="/project"/>}/>

리다이렉트가 되면 /project 로 맵핑되면서 Layout 컴포넌트를 화면에서 보게 된다.

v6로 변경되면서 세부 라우팅이 필요한 부분은 Route의 하위로 넣어줘야 한다.

그래서 /project로 접속했을 때, /project/1과 같이 /project/:projectId로 접속했을 때를 나누어 라우팅하였다.

<Route path="/project/*" element={<Layout />}>
   <Route path="" element={<Project/>}/>
   <Route path=":projectId" element={<ProjectDetail text="test 문구입니다! <3"/>}/>
</Route>

 

 

✅ Layout.tsx

• v6에서는 Outlet을 사용하면 App.tsx에서 설정해둔 세부 라우팅에 맞는 컴포넌트를 호출해온다.

import React, {useEffect} from 'react';
import {Outlet} from 'react-router';

function Layout() {
    return (
        <div>
            <Outlet/>
        </div>
    );
}

export default Layout;

 

✅ Project.tsx

import React from 'react';

const Project: React.FC = () => {
    return (
        <div>
            <h1>메인페이지</h1>
            <ul>
                <li><a href="/project/1">1</a></li>
                <li><a href="/project/2">2</a></li>
                <li><a href="/project/3">3</a></li>
            </ul>
        </div>
    )
}
export default Project;

/project 페이지는 각 세부 디테일 페이지로 넘어갈 수 있는 화면이다.

project 페이지

 

✅ ProjectDetail.tsx

• react-router-dom의 useParams를 사용하여 링크의 projectId를 받을 수 있다.

console.log 결과

• typescript는 전달받는 props의 타입을 미리 지정해주어야 한다.
  • DetailProps라는 타입을 미리 선언하고, 컴포넌트의 파라미터 타입을 DetailProps로 지정해준다.

import React from 'react';
import { useParams } from 'react-router-dom';

type DetailProps = {
    text:String
};

const ProjectDetail : React.FC<DetailProps> = ({
    text
}):JSX.Element => {
    const params = useParams();
    console.log("params", params, text);
    return (
        <div>
            <h2>project detail 페이지</h2>
        </div>
    )
}
export default ProjectDetail;

 

ProjectDetail 페이지

 

 

완성된 프로젝트의 디렉토리 구조이다

 

이렇게 기본적인 리액트와 타입스크립트를 사용하여 라우팅을 하고 화면을 구성하는 프로젝트를 만들어보았다.

기본 구조를 활용하여 앞으로의 프로젝트도 진행할 수 있을 것 같다.

 

✅ 참고 링크

• react-router v6 정리 https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC