React 코드는 어떻게 구성해야 합니까?(2/2)

주의: 이 글은 코드를 구성하는 유일한 방법이라고 설명하지 않았습니다.다른 좋은 방법도 많아요.너희들 중 대다수는 이미 이런 방법을 따랐을 것이다.이 글은 또한react와 그 생태계에 대해 배경 지식도 있고 인터넷 커뮤니티에서 사용하는 상용 용어도 있다고 생각한다

이것은 두 편의 문장 시리즈의 두 번째 문장이다.만약 네가 아직 읽지 않았다면, 계속 읽어라.

늦어서 죄송합니다.나는 Office 시리즈를 미친 듯이 보고 참지 못하고 그것을 다 보고 썼다.
Reac SPA나 당신이 좋아하는 웹 창고에 좋은 파일 구조를 구축하는 방법을 계속 배울 것입니다.

계속...

만약 당신이 이것이 우리의 응용 프로그램 구성 요소의 모습이라는 것을 기억한다면,

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import './App.css';
import routeConstants from 'shared/constants/routes';

const {
  LOGIN,
  DASHBOARD,
  LISTING,
  PROFILE,
} = routeConstants;

function App() {
  return (
    <Router>
      <div className="App">
        <h1>App Component</h1>
        <ul className="App-nav-list">
          <li className="App-nav-item">
            <Link to={LOGIN.route}>{LOGIN.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={DASHBOARD.route}>{DASHBOARD.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={LISTING.route}>{LISTING.name}</Link>
          </li>
          <li className="App-nav-item">
            <Link to={PROFILE.route}>{PROFILE.name}</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path={LOGIN.route}>
            <h1>{LOGIN.name}</h1>
          </Route>
          <Route path={DASHBOARD.route}>
            <h1>{DASHBOARD.name}</h1>
          </Route>
          <Route path={LISTING.route}>
            <h1>{LISTING.name}</h1>
          </Route>
          <Route path={PROFILE.route}>
            <h1>{PROFILE.name}</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

응용 프로그램 구성 요소에 내비게이션 링크를 보여 주는 내비게이션 표시줄 구성 요소를 만들 것입니다.파일 탐색 표시줄을 만듭니다.src/screens/App/components 디렉터리의 js.

응용 프로그램 구성 요소 파일에서 내비게이션 표시줄을 가져오고 사용하려면 다음 사항을 변경합니다.

// Other import statements

import Navbar from "./Navbar";

const {
  LOGIN,
  DASHBOARD,
  LISTING,
  PROFILE,
} = routeConstants;

const navItems = [LOGIN, DASHBOARD, LISTING, PROFILE];

/* Inside return statement */

        <h1>App Component</h1>
        <Navbar navItems={navItems} />

/* other jsx code */

export default App;

다음에 우리가 해야 할 일은 우리의 파일 구조에서 모든 루트 구성 요소에 자신의 공간을 제공하는 것이다.이를 위해, 나는 screens 디렉터리 아래에 src/screens/App 라는 디렉터리를 만들 것이다.
나는 나의 파일 구조에서 단어screens를 사용했다. 왜냐하면 우리의 응용 프로그램은 우리가 화면에서 본 한 조의 물건이기 때문에 나 또는 누구든지 이 단어와 관련되거나 이해하기 쉽기 때문이다.루트/children/views 같은 원하는 단어를 사용할 수 있습니다
나는 사용하지 않았다views. 왜냐하면 우리의 관점은 다를 수 있기 때문이다.아니오, 이것은 원인이 아닙니다.내가 마이클 스콧에게 너무 진지해서 그런지

현재 src/screens/App 디렉터리는 두 개의 폴더 components 와 screens 를 포함하고 있습니다.새로 만든 화면에는 우리의 모든 노선, 로그인, 대시보드, 목록, 프로필 노선에 사용할 4개의 디렉터리가 포함되어 있습니다.이제 새로 만든 폴더마다 components 라는 폴더와 파일 index.js 을 만듭니다.

그런 다음 라우트마다 구성 요소 파일을 만들고 제목 표시자로 채운 다음 index.js 에서 다음과 같이 구성 요소를 내보냅니다.
이것은 구성 요소 파일 내용입니다.

import React from 'react';

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default Dashboard;

이것은 상기 구성 요소를 내보냅니다index.js.

import Dashboard from './components/Dashboard';

export default Dashboard;

나는 네가 이렇게 하는 로그인, 상장과 개인 자료를 고려하고 있다.
이제 응용 프로그램 구성 요소에서 이 루트 구성 요소를 가져오고 렌더링에서 사용할 것입니다.

/* Other imports */
import Login from '../screens/Login';
import Dashboard from '../screens/Dashboard';
import Listing from '../screens/Listing';
import Profile from '../screens/Profile';

/* Other App component code */

<Route exact path={LOGIN.route}>
    <Login />
</Route>
<Route path={DASHBOARD.route}>
    <Dashboard />
</Route>
<Route path={LISTING.route}>
    <Listing />
</Route>
<Route path={PROFILE.route}>
    <Profile />
</Route>

/* Other code */

export default App;

자, 이제 공유기, 루트, 루트 설정을 하나의 단독 공간으로 옮깁니다.이것은 우리의 구성 요소 파일이 깨끗하고 간소화되도록 보장할 것이다.좋아, 두 단어 모두 압운했어.P
라우팅 구성을 내보내는 각 라우팅 폴더에 파일 route.js 을 생성합니다.다음은 예시를 하나 제시하는데,

나는 다른 노선을 위해 상술한 조작을 했고 노선을 하나 만들었다.src/screens/App 디렉터리의 js 파일로 이 모든 경로를 가져옵니다. 아래와 같습니다.

다음 일은 이 루트 설정을 통합하여 추가하기 위해 응용 프로그램 구성 요소를 변경하는 것입니다.
react 공유기domDOC을 가리키며, 루트 설정 작업에 필요한 모든 변경 사항을 완성했습니다.
다음은 src/shared 디렉터리에 모든 응용 프로그램에서 공유할 수 있는 구성 요소를 포함하는 폴더를 만들 것입니다.이제 라우팅 구성 요소를 렌더링하는 데 사용할 구성 요소를 추가합니다.

이 구성 요소는 라우팅 경로와 렌더링 구성 요소를 포함하는 객체를 수신합니다.index.js의 src/shared/components 파일로 상기 공유 구성 요소를 내보냅니다.

export { default as RouteWithSubRoutes } from './RouteWithSubRoutes.js';

export default {};

다음은 응용 프로그램과 네비게이션 표시줄 구성 요소를 변경할 것입니다.여기에 코드를 붙여넣습니다.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';

import { RouteWithSubRoutes } from 'shared/components';

import './App.css';
import routes from '../route';
import Navbar from './Navbar';

function App() {
  return (
    <Router>
      <div className="App">
        <h1>App Component</h1>
        <Navbar />
        <Switch>
          {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
          ))}
        </Switch>
      </div>
    </Router>
  );
}

export default App;

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

import { routeConstants } from 'shared/constants';

const {
    LOGIN,
    DASHBOARD,
    LISTING,
    PROFILE,
} = routeConstants;

const navItems = [LOGIN, DASHBOARD, LISTING, PROFILE];

function Navbar() {
    return <ul className="App-nav-list">
        {
            navItems.map((navItem, i) => (
                <li key={i} className="App-nav-item">
                    <Link to={navItem.route}>{navItem.name}</Link>
                </li>
            ))
        }
    </ul>
}

export default Navbar;

그래서 이제 문제는 분리됐다.우리는 단일 로그인, 대시보드, 목록, 개요 파일 디렉터리에서 루트 대상을 가져오고 src/screens/App 디렉터리의 단일 루트 그룹을 형성합니다.이렇게 하면 모든 화면이 존재에 대해 책임을 진다.
현재 특정 화면의 내용을 변경하거나 특정 화면에 새로운 기능을 추가하려면 개발자는 이 폴더로 이동해서 하위 디렉터리에서 변경하면 됩니다.

새 라우팅 추가

새 라우팅을 추가하는 단계를 완료합니다.우리는 그것을 About 라고 명명했다.
우선, 우리는 src/shared/constant/route.js에 새로운 항목을 추가할 것이다

export default Object.freeze({
    LOGIN: {
        name: 'Login',
        route: '/'
    },
    DASHBOARD: {
        name: 'Dashboard',
        route: '/home'
    },
    LISTING: {
        name: 'Listing',
        route: '/list'
    },
    PROFILE: {
        name: 'Profile',
        route: '/me'
    },
    ABOUT: {
        name: 'About',
        route: '/about'
    }
});

그 다음으로, 우리는 내비게이션 표시줄을 변경해서 새로 추가된 경로를 추가할 것이다.하지만 잠깐만요, 그러고 싶지 않아요.다음에 새 루트를 추가할 때 변경할 필요가 없도록 네비게이션 표시줄 구성 요소를 변경합시다.

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

import { routeConstants } from 'shared/constants';

const navItems = Object.values(routeConstants);

function Navbar() {
    return <ul className="App-nav-list">
        {
            navItems.map((navItem, i) => (
                <li key={i} className="App-nav-item">
                    <Link to={navItem.route}>{navItem.name}</Link>
                </li>
            ))
        }
    </ul>
}

export default Navbar;

셋째, About 아래에 src/screens/App/screens 라는 새 폴더를 만들 것입니다.또한 components 폴더, index.js, route.js 및 About.js 파일을 새로 만든 components 폴더에 추가하면 라우팅 구성 요소가 포함됩니다.src/screens/App/screens/About/components/About.js

import React from 'react';

function About() {
  return <h1>About</h1>;
}

export default About;

src/screens/App/screens/About/route.js

import { routeConstants } from 'shared/constants';
import About from "./";

export default {
    path: routeConstants.ABOUT.route,
    component: About
};

src/screens/App/screens/About/index.js

import About from './components/About';

export default About;

마지막으로, 우리는 src/screens/App/route.js에서 루트에 대한 내용을 가져오고 추가해야 한다

import LoginRoute from "./screens/Login/route";
import DashboardRoute from "./screens/Dashboard/route";
import ListingRoute from "./screens/Listing/route";
import ProfileRoute from "./screens/Profile/route";
import AboutRoute from "./screens/About/route";

export default [
    LoginRoute,
    DashboardRoute,
    ListingRoute,
    ProfileRoute,
    AboutRoute
];

우리는 새로운 About 노선을 개발하고 있다

하위 라우팅

이 장면에서 새로운 하위 루트를 기존 하위 루트에 추가해야 하는 장면을 상상해 봅시다.나는 이 점을 실현하기 위해 Profile 노선을 선택할 것이다.우리는 색인 루트 Details 가 프로필 세부 정보를 표시하고, 다른 루트 Settings 가 프로필 설정 목록을 표시합니다.
따라서 localhost:3000/me 는 렌더링되고 Details 는 렌더링됩니다 localhost:3000/me/settings먼저 Profile 하위 디렉토리에 screens 폴더를 만듭니다.
다음으로 Settings 의 프로필 키에 다음 세부 정보를 추가합니다

    PROFILE: {
        name: 'Profile',
        route: '/me',
        subroutes: {
            SETTINGS: {
                name: 'Settings',
                route: '/me/settings'
            }
        }
    },

셋째, 다음 경로 src/shared/constants/route.js 에서 Details 와 Settings 라는 두 개의 새 폴더를 만들 것입니다.또한 src/screens/App/screens/Profile/screens, components, index.js 폴더를 빠르게 추가하고 구성 요소 파일을 새로 만든 route.js 폴더에 추가하면 이 폴더에는 라우팅 구성 요소가 포함됩니다.components 및 Details 하위 프로그램에 대해 이 작업을 수행해야 합니다.다음 코드 세션은 해야 할 일을 보여 줍니다.
파일 내용 - 세부 정보.회사 명

import React from 'react';

function Details() {
  return <h1>Details</h1>;
}

export default Details;

파일 내용 - 설정.회사 명

import React from 'react';

function Settings() {
  return <h1>Settings</h1>;
}

export default Settings;

Settings

import { routeConstants } from 'shared/constants';
import Settings from "./";

export default {
    path: routeConstants.PROFILE.subroutes.SETTINGS.route,
    component: Settings
};

src/screens/App/screens/Profile/screens/Settings/route.js

import { routeConstants } from 'shared/constants';
import Details from "./";

export default {
    exact: true,
    path: routeConstants.PROFILE.route,
    component: Details
};

src/screens/App/screens/Profile/screens/Details/route.js

import Settings from './components/Settings';

export default Settings;

참고: Details 하위 루틴을 사용하여 이 작업을 수행할 수도 있습니다.
다음 단계는 우리의 프로필 루트 설정을 업데이트하는 것이다

마지막으로 프로필 화면에 내비게이션 링크를 추가해야 합니다.이를 위해 프로필 구성 요소에서 변경할 것입니다.src/screens/App/screens/Profile/screens/Settings/index.js

import React from 'react';
import { Switch, Link } from 'react-router-dom';
import { RouteWithSubRoutes } from 'shared/components';
import { routeConstants } from 'shared/constants';

const { PROFILE } = routeConstants;
const { SETTINGS } = PROFILE.subroutes;

function Profile({ routes }) {
  return <>
    <h2>Profile</h2>
    <ul className="App-nav-list">
      <li className="App-nav-item">
        <Link to={PROFILE.route}>Details</Link>
      </li>
      <li className="App-nav-item">
        <Link to={SETTINGS.route}>{SETTINGS.name}</Link>
      </li>
    </ul>
    <Switch>
      {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route} />
      ))}
    </Switch>
  </>;
}

export default Profile;

파일 구조가 지금 이렇게 보인다.

나는 네가 알아맞혔다는 것을 안다. 이것은 내가 이곳에서 실현한 분형 구조이다.기본적으로 특정 폴더로 확대할 때 구조를 반복합니다.물론 스크린 디렉터리를 가리킨다.

내가 남긴 것

테스트 파일 - 이 글에는 테스트를 작성하는 것이 포함되지 않았지만, 테스트 중인 파일에 최대한 접근할 수 있도록 하십시오.

CSS-저는 CSS 프로세서의 팬이지만 CSS-IN-JS 또는 JSS를 계속 사용해서 이런 방법을 보충할 수 있습니다.

내 등을 두드려라. 내가 이 말을 썼기 때문이다.P

이점

git 합병 충돌은 매우 적고 심지어 없다.

관심사 분리

한눈에 보기

만약 당신이 특정한 노선을 걷고 그 저장소에 들어가고 싶다면 이것은 매우 쉽다. 왜냐하면 우리가 그것을 건설하는 것은 자신을 유지하기 위해서이기 때문이다.

새 루트나 하위 루트를 추가하는 절차가 쉽기 때문에 확장이 쉽다.

최종 어플리케이션,

수라제르 88 / 반응 spa 파일 구조

dev.to 블로그 글의 코드https://dev.to/surajjadhav/how-should-we-structure-our-react-code-1-2-1ecm

결론

나는 두 개의 댓글이 모두 매우 길어서 너를 짜증나게 할 수 있다는 것을 안다.그러나 지금은 문서 구조에 투자하는 매우 중요한 시기다.제품의 증가에 따라 우리는 코드 파일을 관리하는 데 더 많은 어려움에 직면했기 때문이다.만약 새로운 기능이 우리로 하여금 전체 응용 프로그램 코드를 다시 설계하게 한다면, 우리는 발을 잘못 디디고 싶지 않다.
모든 루트에 실행해야 할 모든 코드가 포함되어 있는지 확인하고, 폴더에서 주 코드 파일을 내보내기 위해 src/screens/App/screens/Profile/components/Profile.js 파일을 보류하십시오.테스트 파일이 가능한 한 코드에 접근하도록 하세요.가장 중요한 것은 아래의 논평 부분에 문제가 있으면 저에게 알려주십시오.

읽어주셔서 감사합니다.