[React] 라우팅(Routing)이란? / react-router-dom / header, footer / 홈페이지 만들기 / react img / require 문법

라우팅(Routing) 이란?

라우팅

: 호출되는 URL에 따라 페이지 이동을 설정하는 것

 

React에서 view는 component를 사용하고 있습니다.

라우팅을 이용하면, 호출되는 URL에 따라 서로 다른 컴포넌트를 표시할 수 있습니다.

react-router-dom 패키지

react에서 라우팅을 지원하는 패키지 중, 웹 개발을 위한 패키지로 적합한 것은 react-router-dom 입니다.

 

*설치 방법

npm install --save react-router-dom

 

react-router-dom 패키지는 BrowserRouter, Route, Link 기능을 제공합니다.

 

Route와 Link를 사용하기 위해서는 <BrowserRouter> 태그로 감싸 사용해야 합니다.

- Route

: 호출되는 URL에 따라 이동할 component를 정의

 

path	호출되는 URL 경로
component	연결할 컴포넌트

- Link

: <a> 태그처럼 페이지에 표시되는 링크를 클릭하면 URL을 호출

 

<Link> 태그의 to 속성에 path를 연결합니다. 이 때, path는 App.js의 <Route> 태그에서 특정 컴포넌트로 라우팅 처리가 되어 있어야 합니다.

정의한 path를 Link 속성에 연결해놓으면, 링크를 클릭했을 때 라우팅된 컴포넌트로 이동합니다.

header, footer

: 라우팅과 관계없이 항상 표시되어야 하는 영역

 

import한 header 컴포넌트를 <Route> 태그보다 위쪽에,

import한 footer 컴포넌트를 <Route> 태그보다 아래쪽에 위치시키면 됩니다.

 

이는 components 폴더에 Header, Footer 폴더를 각각 만들고, 컴포넌트를 생성해 사용하면 됩니다.

// header
import HeaderAdmin from '헤더 컴포넌트';

// footer
import Footer from '푸터 컴포넌트';

class App extends Component {
	render(){
    	return(
        	<div className="App">
            	//Header
            	<HeaderAdmin/>
                //Routing
                <Route exact path='/' component={reactRouter} />
                <Route exact path='/reactRouter2' component={reactRouter2} />
                //Footer
                <Footer/>
            </div>
        );
    }
}

export default App;

home 페이지

: 루트 경로(/)로 URL을 호출했을 때 접속하게 되는 페이지

<Route exact path='/' component={홈페이지 컴포넌트} />

이 형태를 이용해 라우팅합니다.

react에서 이미지 불러오기

html에서 <img> 태그에 src 속성 값으로 이미지 경로를 직접 할당하면, 화면에 이미지를 표시할 수 있습니다.

react에서는 이와 비슷하게 <img> 태그에 src 속성 값으로 이미지 경로를 할당하지만, require 문법을 사용해야합니다.

<img src={require("이미지경로")} alt="" />

이처럼 react에서는 require 문법을 사용해 이미지 경로를 할당합니다.