2. Create Pages

$ npm i react-router react-router-dom
$ npm i -D @types/react-router @types/react-router-dom

이렇게 && (=And) 연산자를 사용해서, 한번에 붙여서 사용할 수도 있음.

$ npm i react-router react-router-dom && npm i -D @types/react-router @types/react-router-dom

---

• 우리 앱의 진입점(=Entry) 파일인 index.tsx 파일에 설정(=Config, Configuration) 해준다.

import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘./App’
import { BrowserRouter } from ‘react-router-dom’

ReactDom.render(
	<BrowserRouter>
		<App />
	</BrowserRouter>,
	document.getElementById(‘root’)
)

---

• 우리 앱의 진입점(=Entry) 파일을 지나, 이어져 실행되는 <App />
• 페이지를 지정해주는 용도의 컴포넌트로 만든다.

* ~/src/App.tsx

import React from ‘react’
import { Route, Routes, Navigate } from ‘react-router-dom’

// 협회소개 함수는 “협회소개” 하는 동작을 위해 만들었다.
function 협회소개() {
	return (
		<h1>
			언어재활사의 정의
			생애 중 발생할 수 있는 의사소통의 문제, 즉 언어와 말에 어려움이 있는 대상자들의 중재 및 재활을 담당하는 작업을 말합니다.
		</h1>
	)
}
// 협회_지부활동 함수는 “협회_지부활동” 을 위한 동작을 위해 만들어졌다.
function 협회_지부활동() {
	return (
		<h1>
			한국언어재활사 협회
			지부소개
			한국언어재활사 협회의 지역별 지부를 소개합니다.
		</h1>
	)
}
// 회원안내 함수는 “회원안내” 를 위한 동작을 위해 만들어졌다.
function 회원안내() {
	return (
		<h1>
			회원자격 및 연회비
		</h1>
	)
}
// 교육및사업 함수는 “교육및사업” 을 위한 동작을 위해 만들어졌다.
function 교육및사업() {
	return (
		<h1>
			교육 및 사업
			언어재활사 모두에게 행복과 기쁨을 선사하는 협회로 거듭 태어나도록 노력하겠습니다.
		</h1>
	)
}


// App 함수는 “내가 원하는 대로” 동작하기 위해 만들어졌다. 내가 넣은 것이 보일거고, 내가 뺀 것이 안보일 거다.
function App() {
	return (
		<Routes>
			<Route path=‘/‘ element={<Navigate to=‘/home’ />} />
			<Route path=‘/information’ element={<협회소개 />} />
			<Route path=‘/branch’ element={<협회_지부활동 />} />
			<Route path=‘/education’ element={<교육및사업 />} />
		</Routes>
	)
}

export default App

 

---

2과 Create Pages 를 통해서 얻어갔으면 하는 것들…

 

 

• 지난 1과 Project Setup을 통해 “아무런 기능도 없는 흰 화면 앱”을 개발해보았다.

하지만 우리는 무엇인가 개발하기를 원하고, 우리가 만든 컨텐츠를 웹 사이트에 담아야 한다.

 

하지만 방대한 자료가 딱 1페이지에만 들어가야한다고 생각해보자.

그럼 엄청난 스크롤의 압박을 받지 않겠는가?

 

Naver를 생각해보자.

News 페이지도 있고, Webtoon 페이지도 있고, Culture, Sports … 수많은 내용이 각 역할에 맞게 페이지화 되어있다.

그렇게 해서 필요한 내용을 필요한 분량만 보이게 할 수 있는 것이다.

 

꼭 다른 사이트를 따라할 필요는 없지만, Pages 를 구현하는 건 좋아보인다.

 

 

• function 키워드가 붙은 함수라는 녀석들

위 코드를 보면 함수를 선언하면서 코멘트를 달아놓았다.

여기서 한번에 이어서 보면 어떤 결론을 도출할 수 있는데,

 

// 협회소개 함수는 “협회소개” 하는 동작을 위해 만들었다.

// 협회_지부활동 함수는 “협회_지부활동” 을 위한 동작을 위해 만들어졌다.

// 회원안내 함수는 “회원안내” 를 위한 동작을 위해 만들어졌다.

// 교육및사업 함수는 “교육및사업” 을 위한 동작을 위해 만들어졌다.

// App 함수는 “내가 원하는 대로” 동작하기 위해 만들어졌다. 내가 넣은 것이 보일거고, 내가 뺀 것이 안보일 거다.

 

그러므로 함수는 단지, “내가 원하는 기능을 넣는 것” 그 이상도, 그 이하도 아니다.

 

 

• 1, 2과를 통해 만들어진 우리의 사이트… 어떤가 아름다운가?

그래서 나중에는 스타일 넣는 법도 배워야겠져?