맨땅에 헤딩하는 Laravel 10 + React 18 (2)

이 블로그에서는 주로 CDN 방식으로 활용하는 vue.js에 대해 다뤘었지만,

아무래도 React는 그러한 방식을 허용하지 않는 모양이다.

따라서 우리에겐 react app 내부에서 routing을 처리해줄 react router가 필요하다.

이전 글과 같이 버전을 지정하지 않고 react-router-dom을 설치하면, 6.x 버전이 설치된다.

5.x에서 6.x로 넘어오면서 꽤 변화가 있었던 모양이다.

변경사항이 궁금하거나 실제로 처리해야 하는 경우는 https://adjh54.tistory.com/48 포스팅을 참고하자.

여기선 혼동을 최소화 하기 위해 6.x 버전에 관해서만 다루기로 한다.

 

라우트를 설정하려면 먼저 라우트를 받아줄 컴포넌트가 필요하다.

샘플이라는 용도에 걸맞게 아무것도 없다시피 한 컴포넌트를 두개 만들기로 한다.

 

// resources/js/Home.jsx

import {Link} from 'react-router-dom';

export default () => {
	return (
    	<h3>이곳은 호움 입니다.</h3>
        <Link to="/introduce">소개 페이지 보기</Link>
    );
};

// resources/js/Introduce.jsx

import {Link} from 'react-router-dom';

export default () => {
	return (
    	<h3 className={'intro-title'}>서비스를 소개합니다.</h3>
        <Link to="/">홈으로</Link>
    );
};

맨땅에 헤딩하는 포스팅이니만큼 두번째 컴포넌트에서 한가지 짚고 넘어가기로 하자.
h3 태그의 프로퍼티에 class 대신 className을 사용하였는데, 이는 jsx 작성에 필수적인 사항이다.
이 부분을 놓치면 영문도 모를 오류와 조우하게 될것이므로, 주의하도록 하자.
기초적인 예약어에 대한 내용은 https://codingapple.com/unit/react2-jsx-classname-html/ 에 잘 정리되어 있다:

 

 

저런 엄청난 완성도의 컴포넌트를 두개나 만들어서 지쳤겠지만, 이어서 라우트를 설정해보자.

// resources/js/Routing.jsx

import {Route, Routes} from 'react-router-dom';
import Home from 'Home';
import Introduce from 'Introduce';

export default () => {
	return (
    	<Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/introduce" element={<Introduce/>}/>
        </Routes>
    );
};

이렇게 만들어진 Router는 <BrowserRouter/> 안에 들어가 작동하게 된다.

진입점인 app.jsx를 열어 생성된 Router를 적용해보자.

// resources/js/index.jsx

import React from 'react';
import ReactDom from 'react-dom/client';
import Routing from "./Routing";
import {BrowserRouter} from "react-router-dom";

ReactDom.createRoot(document.getElementById('app')).render(
    <React.StrictMode>
    	<BrowserRouter>
        	<Routing/>
        </BrowserRouter>
    </React.StrictMode>    
);

 

여기까지 완료되었다면 npm run build 커맨드로 컴포넌트들을 빌드한 후 설정한 호스트로 접속하여 결과를 확인해본다.

 

 

continue;