리액트 앱 구성

(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다.

app.js를 app.jsx로 수정

• jsx란 javascrpit xml 확장자이다.

• javascrpit안에 html 코드를 작성했으므로 정상적인 js에서는 동작이 안되는 문법이다.

• 확장된 버전의 파일로 수정해준다.

react routing 사용을 위한 모듈 설치

npm install --save react-router

npm install --save react-router-dom

디렉토리 생성 → src 디렉토리 안에서

• 실제 페이지들이 들어가는 pages

• 라우터가 들어가 config

• 화면 레이아웃이 들어갈 components

pages

config/page-route.jsx

# /config/page-route.jsx
import React from 'react';
import { Redirect } from 'react-router';

import Home from './../pages/home.jsx';
import About from './../pages/about.jsx';
import Contact from './../pages/contact.jsx';

const routes = [
  {
    path: '/',
    exact: true,
    component: () => <Reditect to="/home" />,
  },
  {
    path: '/home',
    component: () => <Home />,
  },
  {
    path: '/about',
    component: () => <About />,
  },
  {
    path: '/contact',
    component: () => <Contact />,
  },
];

export default routes;

componets/layout

# components/layout/content.jsx
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import routes from '../../config/page-route';

class Content extends React.Component {
  render() {
    return (
      <Switch>
        {routes.map(route => (
          <Route
            key={route.id}
            path={route.path}
            exact={route.exact}
            component={route.component}
          />
        ))}
      </Switch>
    );
  }
}

export default Content;

# components/layout/header.jsx
import React from 'react';
import { Link } from 'react-router-dom';

class Header extends React.Component {
  render() {
    return (
      <>
        <Link to="/">Home</Link>;<Link to="/home">Home</Link>;
        <Link to="/about">About</Link>;<Link to="/contact">Contact</Link>;
      </>
    );
  }
}

export default Header;

• header와 content 두개로 나뉘면서 header는 고정, header에서 버튼을 클릭할때마다(해당 Link 문법이 react에서는 a 태그임) routing 해주어 content를 변경

app.jsx

import React from 'react';
import Header from './components/layout/header';
import Content from './components/layout/content';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    );
  }
}

export default App;

index.js

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

• BrowserRouter를 import 해서 render안의 <BrowserRouter>로 수정

순서

1. index.js에서 getElemenyById해서 root를 찾는다.

2. <BrowserRouter> 안에 정의한 App.js가 index.html의 <div> root 안으로 들어감.

3. App.js에서는 또다른 <div>로 감싸져 있고 상단에 Header, 하단에 Content가 있는 구조임.

4. 그리고 상단의 Header에는 Link 태그 4개가 만들어져 있음

5. Content로 가면 상단에 있는 메뉴를 클릭할때마다 Switch 해줌. component가 렌더링 됨.

6. page-route.jsx에서 만들어준 대로 진행됨. 클릭할때마다 어떤 컴포넌트 어떤 페이지로 렌더링할것인지 정해줌.

정리

• 우선 컴포넌트를 정의하여 각 객체? 및 레이아웃를 코딩해줌

• 해당 컴포넌트는 page-route에서 정의한 것과 react-router를 활용하여 routing 진행

• app.js에서 해당 컴포넌트와 레이아웃을 설정하여 rendering해줌

• index.js에서 BrowserRouter 해줄 app.js를 엮어줌

• index.html에서 해당 index.js를 엮어줌

이와 같은 구조인 것 같다.