배럴 수출로 React 구성 요소 더 잘 구성

배럴 수출로 React 구성 요소 더 잘 구성

리액트 수입품이 조금은... 장황한

import * as React from "react" import compose from "recompose/compose" import type Dispatch from "redux" import connect from "react-redux" import querystring from "query-string" import generateMetaInfo from "shared/generate-meta-info" import Head from "../../components/head" import SegmentedControl from "../../components/Layout/segmentedControl" import ChannelProfileCard from "../../components/Layout/entities" import CommunityAvatar from "../../components/Layout/avatar" import ErrorBoundary from "../../components/error" import MembersList from "./components/MembersList" import PostFeed from "./components/PostsFeed" import SidebarSection from "../../components/Layout/SidebarSection" import CommunitySidebar from "../../components/communitySidebar" import FeedsContainer from "./style" import InfoContainer from "../community/style" import FullScreenRedirectView from "../../views/viewHelpers/fullScreenRedirect" // and this isn't even that long...

노드 모듈 수입은 피할 수 없지만 현지 수입품은 정리할 수 있습니다.

배럴 수출 이라는 패턴을 가지고 있습니다.

배럴 수출

import { ChannelProfileCard, CommunityAvatar, CommunitySidebar, ErrorBoundary, FeedsContainer, FullScreenRedirectView, Head, InfoContainer, MembersList, PostFeed, SegmentedControl, SidebarSection, } from "../../components"

훨씬 보기 편하지, 응?

그러나 배럴은 미적인 것 이상이다. 파일 시스템을 보다 유연하게 구성할 수 있고 명명된 내보내기 기능을 통해 VScode와 같은 에디터의 구성 요소에 대한 Intellisense 및 자동 가져오기가 개선되었습니다. 우리는 벌룬 수입 명세서를 걱정할 필요 없이 폴더를 최대한 깊이 중첩할 수 있습니다.

배럴 수출 설정 방법

React에 대한 기존 내보내기/가져오기 설정은 다음과 같습니다.

// src/components/SidebarSection/index.js const SidebarSection = (props) => { /* implementation */ } export default SidebarSection

// src/views/Homepage/index.js import Error from "../../components/error" import Row from "../../components/Layout/blocks/Row" import SidebarSection from "../../components/Layout/SidebarSection"

배럴 패턴을 활성화하려면 다음 두 가지 작업을 수행해야 합니다.

기본값에서 명명된 내보내기로 변경합니다.

원하는 디렉터리에 "배럴"이 될 인덱스.js를 추가합니다. 이 파일에서 파일 시스템의 해당 분기에 있는 모든 구성 요소를 다시 내보냅니다.

// src/components/Layout/SidebarSection/index.js export const SidebarSection = (props) => { /* implementation */ }

// src/components/index.js // This is the Barrel! export { Error } from "./Error" export { Row } from "./Layout/blocks/Row" export { SidebarSection } from "./Layout/SidebarSection"

// src/views/Homepage/index.js import { Error, Row, SidebarSection } from "../../components"

바로 그거예요!

다음은 뭔가요?

향후 게시물에서는 점 표기 및 상대적인 가져오기 필요성을 제거한 패턴으로 React 코드에 대해 훨씬 더 개선할 수 있는 사항에 대해 알아보겠습니다. 트위터 @just my realname에서 새로운 기사가 나오면 저를 팔로우하세요!

from http://every-issue.tistory.com/2 by ccl(A) rewrite - 2021-09-29 12:00:21