(13) Router - 1
Routing(라우팅): 어떤 경로를 통해서 화면에, 원하는 페이지(=컴포넌트)를 보여줄것인가를 결정해주는 요소입니다.
스프링에서의 controller 역할을 하신다고 보면 됩니다.
기존 리액트 어플리케이션에서는 react 와 react-dom 만을 사용했는데, 여기에 rounting과 관련된 모듈을 설치할겁니다.
1) 환경 설정부터 해봅시다.
react-router-dom 설치 : 브라우저에서 사용되는 리액트라우터입니다.
형식) yarn add react-router-dom@4.3.1 (4.3.1 버전을 설치합니다.)
cross-env library 설치 : 프로젝트에서 NODE_PATH를 사용하여 절대경로로
파일을 불러오기 위하여 환경변수를 설정할 때 운영체제마다 다 방식이 다르므로 공통적인 방법으로 설정할수 있게 해주는 라이브러리입니다.
형식) yarn add cross-env --dev
query-string 설치 : 요청되는 문자열을 처리해주는 모듈입니다.
형식) yarn add query-string@6.5.0 (6.5.0 버전)
jquery 설치 : jQuery 라이브러리입니다.
형식) npm install --save jquery
(save는 dependency에 추가하겠다는 얘깁니다. - package.json)
2) 어플리케이션의 구조를 설계합니다.
- src/components (컴포넌트) =>이동할 페이지가 있는 폴더
- src/Pages (라우터 위치)
- src/client(브라우저에서 사용)=>외부
- src/server(서버에서 사용할코드==>Node.js에서 처리(서버 기능)
- src/shared=>App.js (공통) =>공통으로 사용할 컴포넌트
각 문서들의 역할을 확인해봅니다.
src(/)
- components=>Menu.js(상단메뉴)
- client->Root.js=>App.js=>다른 컴포넌트로 이동
- pages=>Home.js, About.js=>index.js(추가되는 모든 컴포넌트의 경로를 짧게 별칭부여)
- shared->App.js ->Root.js
- client/Root.js저장 <- App.js을 save as
3) cross-env 를 통해 NODE_ENV를 설정해줍니다.
프로젝트를 진행하다보면, '../modules/ui.js', 이런식으로 상대 경로를 통하여 파일을 불러옵니다. 여기에 디렉토리 구조가 복잡해지다보면 '../../modules/ui.js' 이런식으로 파일을 불러올때 불편한점이 생깁니다.
이런 점을 해결해주는 설정이 바로 프로젝트 루트 설정입니다. 프로젝트 루트 설정을 하고나면 다음과 같은 형식으로 파일을 불러올 수 있게 됩니다: 'modules/ui.js'
앞의 ../ 이 사라졌어요!!
프로젝트에서 package.json 을 열어서 start 스크립트를 다음과 같이 수정하세요:
"scripts":{
// cross-env NODE_PATH(환경변수명)=src(최상위폴더명 지정)
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "cross-env NODE_PATH=src react-scripts test",
"eject": "react-scripts eject"
}NODE_PATH로 지정하는 편이 훨씬 깔끔하고 간편합니다.
이제 각각의 컴포넌트들을 코딩해봅시다.
4) src/shared/App.js : 공동으로 사용되는 컴포넌트입니다.
/*
공통의 컴포넌트 App.js
*/
import React,{Component} from 'react';//react.js(1)
class App extends Component {
render(){
return(<div>
<h1>Hello! React-Router </h1>
</div>
)
}
}
export default App;5) 최종적으로 출력하는 컴포넌트로 Root를 사용하기 위해서 src/client/Root.js 를 만들어줍니다.
src/client/Root.js : App을 맨 처음 거쳐서 이동하도록 설정합니다.
react-router-dom : 요청을 해서 처리해야할 router정보입니다.
형식)
const 컴포넌트명 = ()=>( <BrowserRouter> 최상위 컴포넌트(/)</BrowserRouter>)
class로 선언하는 대신 Root 를 화살표 함수로 설정합니다.
import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import App from 'shared/App';
const Root =()=>(
<BrowserRouter>
<App />
</BrowserRouter>
);
export default Root;
6) 이제 index 에서 App이 아닌 Root 를 출력하도록 index.js 를 바꿔줍니다.
import React from 'react';
import ReactDOM from 'react-dom';
//import App from './components/App'; App->Root로 컴포넌트를 부착
import Root from './client/Root';
ReactDOM.render(<Root />, document.getElementById('root'));7) 붙일 페이지를 만들어봅시다 (Home , About)
/* src/pages/Home.js */
import React from 'react';
const Home=()=>{
return(
<div>
<h2>Home</h2>
</div>
);
}
export default Home;
/* src/pages/Home.js */
import React from 'react';
const About=()=>{
return(
<div>
<h2>About</h2>
</div>
);
}
export default About;
8) 페이지에 별칭을 만들어서 부여합니다. (불러쓰기 편하게)
외부에서 불러다 사용하는 파일이 경로가 다르기에 따로 별칭을 부여해줍니다.
형식) export { default as 불러올 클래스의 별칭} from '상대경로를 통한 실제 파일명'
불러올 때는
형식) import {불러올 항목(Home,About,,,)} from '상위폴더명(pages)'
/*src/pages/index.js*/
export {default as Home} from './Home'
export {default as About} from './About' 9) 불러올 페이지와 별칭을 설정했으니, Route로 경로를 지정해주면 됩니다.
외부에서 불러다 사용하는 파일이 경로가 다르기에 따로 별칭을 부여해줍니다.
형식) <Route path="요청경로명" component={컴포넌트의 별칭명}/>
exact 속성 : 중복되는 경로를 , 정확하게 그 경로만 불러오도록 설정 합니다.
이 속성이 안들어가면, 포함되는 경로에 있는 모든 컴포넌트를 가져옵니다.
import React,{Component} from 'react';//react.js
import {Route} from 'react-router-dom';
// Route 기능을 사용할 수 있습니다.
import {Home,About } from 'pages';/
/서버가 가동되면 src/pages/Heme,About 인식가능하도록 import 시켜줍니다.
class App extends Component {
render(){
return(<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
)
}
}
export default App;