3. Divide (Pages) Components

~/src/pages 폴더를 만들고, 내가 만들고 싶은 페이지 컴포넌트들을 만들기

1. ~/src/pages/home.tsx

import React from 'react'

function 홈() {
  return (
    <h1>
      홈 페이지입니다.
    </h1>
  )
}

export default 홈

 

2. ~/src/pages/information.tsx

import React from 'react'

// 협회소개 함수는 “협회소개” 하는 동작을 위해 만들었다.
function 협회소개() {
  return (
    <h1>
      언어재활사의 정의 생애 중 발생할 수 있는 의사소통의 문제, 즉 언어와 말에
      어려움이 있는 대상자들의 중재 및 재활을 담당하는 작업을 말합니다.
    </h1>
  )
}

export default 협회소개

3. ~/src/pages/branch.tsx

import React from 'react'

// 협회_지부활동 함수는 “협회_지부활동” 을 위한 동작을 위해 만들어졌다.
function 협회_지부활동() {
  return (
    <h1>
      한국언어재활사 협회 지부소개 한국언어재활사 협회의 지역별 지부를
      소개합니다.
    </h1>
  )
}

export default 협회_지부활동

4. ~/src/pages/education.tsx

import React from 'react'

// 교육및사업 함수는 “교육및사업” 을 위한 동작을 위해 만들어졌다.
function 교육및사업() {
  return (
    <h1>
      교육 및 사업 언어재활사 모두에게 행복과 기쁨을 선사하는 협회로 거듭
      태어나도록 노력하겠습니다.
    </h1>
  )
}

export default 교육및사업

5. ~/src/pages/membership.tsx

import React from 'react'

// 회원안내 함수는 “회원안내” 를 위한 동작을 위해 만들어졌다.
function 회원안내() {
  return (
    <h1>
      회원자격 및 연회비
    </h1>
  )
}

export default 회원안내

 

---

~/src/App.tsx 에서, 페이지 컴포넌트들을 경로에 맞게 배치한다.

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

import 홈 from './pages/home'
import 협회소개 from './pages/information';
import 협회_지부활동 from './pages/branch';
import 교육및사업 from './pages/education';
import 회원안내 from './pages/membership';

function App() {
  return (
    <>
      <Routes>
        <Route path="/"            element={<Navigate to='/home' />} />
        <Route path='/home'        element={<홈 />}		     />
        <Route path='/information' element={<협회소개 />}            />
        <Route path='/branch'      element={<협회_지부활동 />}       />
        <Route path='/education'   element={<교육및사업 />}          />
        <Route path='/membership'  element={<회원안내 />}            />
      </Routes>
    </>
  );
}

export default App;

• 참고로 Navigate는 path=‘어떤 경로’에 들어왔을 때, to=‘저떤 경로’ 로 이동시켜버리고 싶을 때 사용한다.