[springboot+jwt+react#2] react layout / react-dom

2023.07.21 - [spring+jwt+react] - [springboot+jwt+react] react cra frontend 초기설정

 

오늘 만들것

• 리액트 react-dom과 layout 잡기 (아래와 같이)

사전에 알면 좋은것

• react-dom

실습

• 우선 src 폴더 아래에 compoenents 폴더를 생성하고 다시 Layout 이라는 디렉토리를 만들어준다
• 여기에 Layout.tsx 파일과 Navigation.tsx 파일을 생성해준다.

Layout.tsx

import React, {Fragment} from "react";
import Navigation from "./Navigation";
import Footer from "./Footer";

type Props = {
    children?: React.ReactNode
}


const Layout: React.FC<Props> = (props) => {
    return (
        <Fragment>
            <Navigation/>
            <main>{props.children}</main>
            <Footer/>
        </Fragment>
    )
}
export default Layout;

Navigation.tsx

const Navigation = () => {
    return (
        <>
            <h1>Navigation</h1>
        </>
    )
}

export default Navigation;

Footer.tsx

const Footer = () => {
    return (
        <div>
            footer
        </div>
    )
}

export default Footer;

코드를 보면 알겠지만 아무것도 없다. Layout을 호출하면 네비게이션과 Footer를 불러오고 메인에 props.children (호출하는 페이지)를 불러오는것을 확인할수 있다. 이렇게 작성하면 공통으로 쓰는 navigation과 footer는 중복해서 작업할 필요없이 한번에 작업이 가능하다는 장점이 있다.

자 이제 실제 페이지를 호출해서 화면을 제대로 불러오는지 확인해보자

우선 App.tsx를 수정하자

import React from 'react';
import './App.css';
import {Route, Routes} from 'react-router-dom';

import Layout from './components/Layout/Layout';
import HomePage from "./pages/HomePage";

function App() {
  return (
      <Layout>
          <Routes>
              <Route path="/" element={<HomePage />} />
          </Routes>
      </Layout>
  );
}

export default App;

App.tsx에서는 react-dom을 이용하여 path가 /로 들어올 경우 HomePage를 main으로 보여주게 했다.

src/pages/Homepage.tsx

const HomePage = () => {
    return (
        <div>Main Page</div>
    )
}

export default HomePage;

이것도 아직 별내용은 없다.

그리고 마지막으로 index.tsx에서 router를 사용할것이라고 명시를 해줘야 제대로 동작을 한다.
index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

자 이렇게 한후에 실제 페이지를 호출해보면 아래와 같이 원하는데로 

navigation / main page / footer 가 표시되는것을 확인할수 있다. 

 

오늘은 Layout 기능과 react-dom사용법에 대해서 알아보았다. 

다음시간에는 로그인과 회원가입기능에 대해서 알아보도록 하자

 

소스는 아래 주소에

https://github.com/jaden2dev/spring-jwt-react/tree/feat/2