rory dev log

Next 13 react hydration error

mitty0304@naver.com (Rory) — Thu, 08 Jun 2023 15:00:00 GMT

Error Message +Error: Text content does not match server-rendered HTML. +Warning: Text content did not match. Server: "5/16/2023" Client: "2023. 5. 16." +See more info here: https://nextjs.org/docs/messages/react-hydration-error +Context +Next.js 13 버전 작업 도중, 서버 사이드에서 받아온 날짜 데이터를 클라이언트 사이드에서 변환하여 렌더링했을 때 오류가 발생했다. +"use client"; + +// article props 는 서버 사이드에서 받아옴 +const ArticleTemplate: React.FC = ({ article }) => { + const localizedDate = new Date(date).toLocaleDateString(); + ... + return ( + + {localizedDate} + + ) +} +Solution +우선 위 오류 메세지에 나온 참고 링크를 살펴보면 원인을 설명해주고 있다. + +While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React. +This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present. + +SSR/SSG 를 통해 pre-render 되는 리액트 트리와 브라우저 단에서 render 되는 리액트 트리가 서로 다르기 때문에 발생하는 문제이고 이 과정은 리액트 기능 중 하나인 ‘Hydration’ 과 관련이 있다고 한다. +Hydration 이란? +Hydration 의 개념을 이해하기 위해서는 CSR 과 SSR의 대표 특징을 먼저 익혀두면 좋다. 이를 Time to Interact 와 Time to View 로 간단히 설명해보자면 다음과 같다. + +Time to View (TTV): 사용자가 웹사이트를 보기까지 걸리는 시간 +Time to interact (TTI): 사용자가 웹에서 클릭 이벤트 같은 상호작용이 가능하게 되는데 걸리는 시간 + +1) CSR + + +유저가 웹 사이트를 방문(Request)하면, 브라우저는 최소한의 index.html 파일과 내부의 JS 번들(Response)을 다운 받음. +브라우저는 다운이 완료되면 JS 를 실행하고, API 를 통해 데이터를 패치해서 동적 컨텐츠를 파싱 후 최종 컨텐츠를 보여줌 +사용자가 페이지 이동시, 다시 서버에 request 를 보내지 않고 초기에 받은 JS 파일을 통해 렌더링함 +Time to View === Time to Interact + +2) SSR + + +유저가 웹 사이트를 방문 (Request) 하면, 서버는 콘텐츠가 렌더된 초기 HTML 파일을 준비함 +초기 HTML 파일은 JS 이벤트 같은 추가 렌더링 작업을 위해 브라우저에 보내짐. 이때 유저는 해당 브라우저를 볼 수는 있지만 상호작용을 할 수는 없음 (Response, Time to View) +브라우저는 해당 HTML 파일을 다운 받아서, 인터렉션이 가능하도록 작업을 진행 후, 최종 페이지를 유저에게 전달함 (Time to Interact) + +3) 정리 +React 는 콘텐츠가 없는 HTML Document 파일과 JS 번들 파일을 서버로부터 다운 받은 후, 클라이언트 단에서 자바스크립트 액션을 통해 데이터 패칭 및 Root DOM 요소를 찾아 React 엘리먼트를 하위로 주입하는 과정을 거쳐 웹을 구성한다. + +Next.js 로 만들어진 웹 접속 시, 네트워크 상태 (HTML Document 를 다운 받은 후, script로 DOM 요소를 찾아가며 코드 매칭되는 모습) +Next.js 를 사용할 경우, 서버 사이드에서 data fetch 와 더불어, 콘텐츠가 구성된 초기 웹 페이지를 렌더링하여 클라이언트에게 전송한다. 이때 초기 웹 페이지는 자바스크립트 액션이 모두 빠져있는 HTML 형태이고, 클라이언트 단에서 자바스크립트 코드 파일들이 HTML DOM 요소를 찾아가며 매칭이 이루어진다. 이와 같이 서로 매칭이 이루어지는 과정을 React 에서는 Hydration 이라고 한다. + +더 자세한 내용은 아래 링크를 참고하면 좋다. 상당히 자세하게 설명이 되어 있어서 Hydration이 작동하는 방식을 잘 이해할 수 있다. + +Next.js 의 Hydration 이란? : https://helloinyong.tistory.com/315 +React hydration 관련 코드 : https://react.dev/reference/react-dom/client/hydrateRoot + +Hydration 과정에서 pre-render 된 결과와 브라우저 단에서 render 되는 결과의 차이 문제의 해결 방법은 아래와 같다. + +서버 사이드와 클라이언트 사이드에서 state가 달라지는 경우, useEffect 내부에서 관리한다. + + +문제가 되는 코드 + +function MyComponent() { + // This condition depends on `window`. During the first render of the browser the `color` variable will be different + const color = typeof window !== 'undefined' ? 'red' : 'blue' + // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render + return

Hello World!

+} +서버 사이드에서는 window 객체가 없기 때문에 color 초기 변수가 ‘red’ 로 정의되지만, 브라우저단에서는 ‘blue’ 이다. 서버 사이드와 브라우저에서 초기 렌더 결과, color 변수의 상태가 각각 다르기 때문에 문제가 발생한다. + +해결 방법 + +// In order to prevent the first render from being different you can use `useEffect` which is only executed in the browser and is executed during hydration +import { useEffect, useState } from 'react' +function MyComponent() { + // The default value is 'blue', it will be used during pre-rendering and the first render in the browser (hydration) + const [color, setColor] = useState('blue') + // During hydration `useEffect` is called. `window` is available in `useEffect`. In this case because we know we're in the browser checking for window is not needed. If you need to read something from window that is fine. + // By calling `setColor` in `useEffect` a render is triggered after hydrating, this causes the "browser specific" value to be available. In this case 'red'. + useEffect(() => setColor('red'), []) + // As color is a state passed as a prop there is no mismatch between what was rendered server-side vs what was rendered in the first render. After useEffect runs the color is set to 'red' + return

Hello World!

+} +window 객체 존재 여부에 따른 의존을 없앤다. hydration 과정에서 useEffect가 실행 되면서 변수의 상태를 제어해준다. time to view 에서는 ‘blue’ 로 정의되어 있으나, time to interact 에서는 ‘red’ 로 상태가 변화하는 방식으로 초기 state 를 정의해줄 수 있다. + +HTML 을 적절히 사용한다. + + +문제가 되는 코드 + + +export const IncorrectComponent = () => { + return ( +

+ This is not correct and should never be done because the p tag has been + abused +

+ ) +} +p 태그 내부에 div 태그를 사용하여 문제가 발생한다. + +The tag can NOT be inside tag, because the paragraph will be broken at the point, where the tag is entered. +출처: https://www.w3docs.com/learn-html/html-div-tag.html + + +해결 방법 + +export const CorrectComponent = () => { + return ( +

+ This is correct and should work because a div is really good for this + task. +

+ ) +} +HTML 태그를 적절하게 사용해준다. + +suppressHydrationWarning 을 설정해준다. + +이 방법은 timestamp 와 같이 렌더 트리 간의 exact match 를 보장해주지 못할 경우, warning 을 띄워주지 않는 방법이다. 이 방법은 성능상의 이슈가 있을 수 있기 때문에 남용하지 않는 것이 좋다. + +If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. +출처: https://ko.legacy.reactjs.org/docs/dom-elements.html#suppresshydrationwarning + +참고 자료 +CSR 과 SSR 차이 + +https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg +https://velog.io/@juurom/TIL-react-hydration-error-원인-및-해결방법-feat.-react-calendar + +Hydration 개념 + +https://aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/#summary +https://velog.io/@huurray/React-Hydration-에-대하여 +https://helloinyong.tistory.com/315 +https://velog.io/@hyemin916/번역-리액트-앱SSR의-Hydration-이해하기 + +

HTML 을 이용하여 새 탭으로 링크 열기 (feat.Tabnabbing)

mitty0304@naver.com (Rory) — Sun, 04 Jun 2023 15:00:00 GMT

시작에 앞서, +기본적이면서도 자주 사용되는, 새 탭으로 링크 여는 방법에 대해 알아보려 한다. 대부분의 내용 출처는 아래 링크를 참고했다. +How to Use HTML to Open a Link in a New Tab +기본 링크 이동하기 +HTML 로 링크 이동하는 방법은 태그를 활용한다. 다만, 아래의 방식은 새 창에서 여는 것이 아니라, 현재의 창이나 탭에서 바로 이동하기 때문에 페이지 이탈이 발생한다. +

Click here example

+만약 페이지 유지를 함으로써, 광고 효과를 얻으려고 하는 목적이 있다면 적절하지 않기 때문에, 새 탭이나 새 창으로 여는 방식을 대체하여 적용하는 것이 좋다. +새 탭으로 링크 이동하기 +새 탭 이동을 위해서는 태그에 몇 가지 속성을 적용해주면 된다. + +Target attribute + +target 속성에 _blank 를 적용해주면 사용자 설정에 따라 새 창 혹은 새 탭으로 링크를 열 수 있다. +example + +rel="noreferrer noopener” + +단순히 target 속성만을 추가해주어도 되지만, rel="noreferrer noopener” 를 같이 사용해주는 것이 추천되는 방식이다. +example +rel 속성은 링크된 리소스와 현재 문서 간의 관계를 정의하고, 웹 브라우저와 검색 엔진에 대한 설정이 필요할 경우 사용한다. 아래와 같은 옵션들을 가지고 있다. + +nofollow : 검색 엔진이 해당 링크를 크롤링하지 않는다. +noreferrer: 링크를 클릭했을 때 HTTP referer header를 넘기지 않는다. +noopener : 브라우저가 문서에 대한 새로운 탐색 접근 권한을 부여하지 않고 해당 리소스로 이동하도록 한다. ⇒ 이는 곧 보안과 관련이 있는데 해당 속성을 추가해줌으로써 window api 의 악용으로 인한 tabnabbing 문제를 막을 수 있다. + +tabnabbing 이란? +Tabnabbing은 피싱 공격 방식 중 하나로, reverse tabnabbing 이라고도 불린다. target=”_blank” +로 설정된 브라우저 기본 동작과 window.object API 를 이용하여 사용자가 피싱 페이지로 리다이렉트 하도록 하는 방식이다. + +출처: https://easydmarc.com/blog/what-is-tabnabbing-and-how-it-works/ +예를 들어, 특정 링크에 target=”_blank” 만이 적용되었다고 생각해보자. 이 때 새 탭으로 열린 창에서 window.opener.location 객체 정보를 통해 기존 링크가 있던 페이지의 정보를 알 수 있다. +코드 예시는 아래 링크를 참고하였다. + +https://book.hacktricks.xyz/pentesting-web/reverse-tab-nabbing + + +만약 여기서 window.opener API 를 통해 href 의 정보를 피싱 사이트 url로 바꾸게 되면 사용자가 새 탭에서 이탈했을 경우 피싱 사이트로 redirect 되고 사용자 정보가 유출될 수 있는 문제가 발생한다. +window.opener.location = "https://j2j85l.csb.app/malicious_redir.html" + +요약하자면, a 링크에 rel=”noreferrer noopener" 를 적용해줌으로써 새 탭의 서버에서 사용자가 어떤 사이트로부터 접근을 한 것인지 아는 것을 막을 수 있고 tabnabbing 문제를 방지할 수 있다. +참고 자료 + +https://developer.mozilla.org/ko/docs/Web/HTML/Element/a +https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ +https://velog.io/@sisofiy626/Tabnabbing-피싱-공격에-대해-알아보기.-noopener-noreferrer +https://3rabbitz.com/blog_ko/08d34c69855fbcad + +

Next.js13 업데이트 사항 정리

mitty0304@naver.com (Rory) — Mon, 22 May 2023 15:00:00 GMT

시작에 앞서, +오늘은 Next.js 13 업데이트 사항을 정리해보려 한다. 지난 회사에서 진행한 프로젝트는 대부분 12 버전이였고, 사용하면서 서버 사이드 로직 관리, 이미지 컴포넌트 코드 작성 방법 등의 불편함이 존재했는데, 13 버전에서 일부분 해결이 된 것으로 보인다. +Next.js 13 공식 문서 +공식 블로그에 공지된 업데이트 사항은 다음과 같다. + +이번 포스팅에서 주로 다룰 부분은 1) app directory 구조 변화와 2) image, link 사용 방법이다. +1. app Directory +지난 12 버전에서 다룬 파일 시스템 구조는 /pages 기반이였다. /pages 디렉토리 하위에서 _app, _document와 각종 페이지 라우트를 관리해주었는데 13버전에서는 이를 /app에서 관리한다. +1) Layouts +12 버전에서는 /pages 경로에 파일이 위치하게 되면 이를 페이지 라우팅 용도로 인식해서, next.config 에 따로 설정하지 않는 한, 페이지 용도가 아닌 파일들을 위치시킬 수 없었다. +그러나, 이번 13 버전에서는 페이지 용도가 아닌 파일들도 /app 하위 디렉토리에 위치시킬 수 있고 , 이에 따른 파일 컨벤션이 존재한다. +page.js +특정 경로의 메인 페이지 컴포넌트로, 12버전의 index.js 파일 대신 page.js 를 사용한다. +아래 사진처럼 /app/dashboard/settings 경로 하위에 page.js 를 위치시키면 자동으로 /dashboard/settings 라는 페이지 경로가 생성된다. + + +layout.js + +페이지 레이아웃 컴포넌트를 설정할 수 있다. /app의 root 경로에 바로 layout.js 를 추가하면 global(root) 레이아웃을 설정할 수 있고, 페이지 디렉토리 하위에 위치하면 per-page(nested) 레이아웃을 만들어줄 수 있다. + +root layout 과 nested layout 설정 방법 +코드 상으로는 아래와 같이 layout 파일을 만들어주고, layout 이 감싸게 될 자식 컴포넌트로 children 을 보내주면 된다. + +root layout + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} + +nested layout + +export default function DashboardLayout({ + children, +}: { + children: React.ReactNode; +}) { + return

{children}

; +} +12버전의 _app, _directory 그리고 per-page layout 을 위해 사용했던 getLayout 역할을 대신한다고 보면 된다. + +12버전에서 사용하던 layout 설정 방식 보러가기 + +loading.js +로딩 UI 를 보여줄 수 있고, 페이지 디렉토리 내 모든 파일들이 loading 동안에는 자동으로 React.Suspense 로 감싸진다. + +error.js +런타인 동안의 에러를 다룰 수 있는 컴포넌트이고, 페이지 디렉토리 내 파일들이 자동으로 React error boudary +범위로 감싸진다. + +더 자세한 내용은 아래 파일 컨벤션 문서에서 확인할 수 있다. + +https://nextjs.org/docs/app/building-your-application/routing#file-conventions + +2) React Server Components +13 버전에서는 react client 컴포넌트와 server 컴포넌트를 app 하위에서 분리하여 관리할 수 있도록 지원한다. +이전에는 하나의 컴포넌트 내부에서 getStaticProps와 getServerSideProps 를 이용하여 서버 사이드 로직과 클라이언트 사이드 로직을 한 번에 관리를 했으나, 13 버전에서는 로직을 ‘use client’ , ‘server-only’ 키워드를 사용하여 파일로 관리할 수 있도록 한다. +기본적으로 app 경로 하위의 파일들은 server component 로 동작하고 클라이언트 사이드 컴포넌트를 정의하고 싶다면 ‘client only’ 를 최상단에 작성하면 된다. +'use client'; // 최상단에 작성해준다. + +import { useState } from 'react'; + +export default function Counter() { + const [count, setCount] = useState(0); + + return ( +

You clicked {count} times

+ +

+ ); +} +그렇다면, 언제 서버 사이드나 클라이언트 사이드를 사용하면 좋을까? 아래 문서에서 자세히 설명해주고 있지만, 요약하자면 다음과 같다. + +When to use Server and Client Components? +서버 사이드 +백엔드 데이터를 패치하는 경우 +사이즈가 큰 dependency 를 사용하는 경우 + + +클라이언트 사이드 +onClick(), onChange() 와 같은 이벤트 리스너를 사용하는 경우 +state 관리를 하거나 react life cycle 을 사용하는 경우 + + + + + +여기서 중요한 점은 Client Component 에서 서버에서 동작하는 로직이 포함된 Server Component 를 임포트할 수는 없다. 서버 컴포넌트를 브라우저 단에서 실행할 수는 없기 때문이다. +'use client'; + +// This pattern will **not** work! +// You cannot import a Server Component into a Client Component. +import ExampleServerComponent from './example-server-component'; + +export default function ExampleClientComponent({ + children, +}: { + children: React.ReactNode; +}) { + const [count, setCount] = useState(0); + + return ( + <> + + + + + ); +} +다만, 클라이언트 컴포넌트에서 서버 컴포넌트를 children props 으로 받을 수는 있다. +// This pattern works: +// You can pass a Server Component as a child or prop of a +// Client Component. +import ExampleClientComponent from './example-client-component'; +import ExampleServerComponent from './example-server-component'; + +// Pages in Next.js are Server Components by default +export default function Page() { + return ( + + + + ); +} +이는 컴포넌트 합성과 관련이 있는데, 위 코드를 참고하여 이해해보자면, 서버 사이드로 동작하는 Page.tsx 에서 클라이언트 사이드의 컴포넌트 ExampleClientComponent를 임포트해오고 ExampleClientComponent는 서버 사이드의 컴포넌트인 ExampleServerComponent를 children 으로 받는다. + +React will know it needs to render on the server before sending the result (which doesn't contain any server-only code) to the client. From the Client Component's perspective, its child will be already rendered. + +즉, 클라이언트 컴포넌트는 ReactNode 를 prop 으로 받을 수 있고, ReactNode 는 서버 컴포넌트에 의해 렌더링할 수 있기 때문에 서버 컴포넌트를 children prop 으로 전달하는 것은 가능하다. 클라이언트 컴포넌트의 관점에서는 child 인 서버 컴포넌트가 이미 렌더링되었기 때문이다. +3) Data Fetching +13 버전에서는 getStaticProps / getInitialProps / getServersideProps 의 방법은 지원되지 않고 fetch option 으로 대체되었다. +// This request should be cached until manually invalidated. +// Similar to `getStaticProps`. +// `force-cache` is the default and can be omitted. +fetch(URL, { cache: 'force-cache' }); + +// This request should be refetched on every request. +// Similar to `getServerSideProps`. +fetch(URL, { cache: 'no-store' }); + +// This request should be cached with a lifetime of 10 seconds. +// Similar to `getStaticProps` with the `revalidate` option. +fetch(URL, { next: { revalidate: 10 } }); + +{ cache: 'force-cache' } - getStaticProps 처럼 동작하며, 기본값이다. (getStaticprops 설명) +{ cache: 'no-store' } - getServersideProps와 유사하고, 매 요청마다 최신 데이터를 refetch 해온다. (getServersideProps 설명) +{ next: { revalidate: 10 } } - revalidate 옵션이 있는 getStaticProps 와 유사함, 매 10초 마다 요청이 들어오면 최신 데이터를 fetch 함 + +2. New next/image +13버전에서 개선된 nextjs image 컴포넌트의 특징은 아래와 같다. + +Ships less client-side JavaScript +Easier to style and configure +More accessible requiring alt tags by default +Aligns with the Web platform +Faster because native lazy loading doesn't require hydration + +Layout Shift 와 최적화를 위한 개선을 시도 하였으며, 코드 상으로는 일부 스타일링과 접근성을 위한 속성이 정리되었다. 접근성을 위해 alt 속성이 필수값이 되었고, 12버전에서 사용되던 layout 속성이 제거되어 13 버전에서는 ‘fill (boolean)’ 으로 대체되었다. +추가된 필수 속성 + +width +height +alt +fill (boolean) + +제거된 속성 + +objectFit +objectPosition +layout + +그 외, 12 버전의 이미지 컴포넌트는 next/legacy/image 로 위치가 변경되었다. +자세한 변경사항은 이 링크를 참고하면 된다. +3. New next/link +기존 12버전의 next/link 는 자동으로 로 wrap 되지 않았기 때문에 접근성을 위해서는 모두 태그를 nested 하여 작성해주어야 했다. +import Link from 'next/link' + +// Next.js 12: `` has to be nested otherwise it's excluded + + About + + +// Next.js 13: `` always renders `` + + About + +13 버전에서는 강제로 a 태그가 wrap 이 되기 때문에, 바로 만 사용해주어도 된다. +만약 12 버전처럼 사용하고 싶다면 legacyBehavior 속성을 사용하면 된다. +자세한 변경사항은 이 링크를 참고하면 된다. +참고 자료 + +https://programming119.tistory.com/267 +https://patterns-dev-kr.github.io/rendering-patterns/react-server-components/ +https://velog.io/@xmun74/Data-Fetching-getStaticProps-getStaticPaths-getServerSideProps + +

ES6 import / export 기본 사용 방법

mitty0304@naver.com (Rory) — Mon, 15 May 2023 15:00:00 GMT

시작에 앞서, +React 에서 모듈간 코드 공유와 재사용을 위해 자주 사용되는 import / export ES6 구문에 대해 알아보고자 한다. 쉽고 간단할 수록 , ‘하던 대로’ 코드를 작성하게 된다. 이번 포스팅을 통해, 조금 더 의식적으로 코드를 작성해보자. +모듈이란? +코드의 재사용성을 위해 사용되는 독립적인 코드의 단위이다. function / component 등을 담을 수 있고, 다른 파일에서 임포트해서 사용할 수도 있다. 여기서 “모듈화”를 한다고 하면, 코드를 독립적인 단위로 분리해서 구성하는 것을 의미한다. +export와 import 사용 방법 + +Default Export / import + +단일 모듈을 내보낼 때 사용된다. 이때, 한 파일 내에서 export default 키워드는 오직 하나만 있어야 한다. +const myFunction = () => { /* 함수 내용 */ }; +export default myFunction; +default export 를 사용한 모듈을 import 해 올 때는 다른 이름으로 정의하여 사용할 수 있다. +import myFunction from './myFunction'; + +// 다른 이름으로 정의하여 import 해올 수 있다. +import myFunc from './myFunction'; +단, let / const 를 바로 내보낼 수는 없다. function / class 는 가능하다. +export default let myValue1 = 1; // 불가 +export default const myValue2 = 2 // 불가 + +export default function myFunction () { ... } // 가능 +export default class myClass extends React.Component {} // 가능 + +Named Export / import + +한 파일에서 여러 모듈을 내보낼 때 사용한다. 내보내기할 대상 앞에 export 키워드를 사용한다. + +하나씩 내보내기 + +export const myFunction = () => { /* 함수 내용 */ }; +export const myVariable = 1 +export class MyClass { /* 클래스 내용 */ } + +목록으로 내보내기 + +export { myFunction, myVariable, MyClass }; + +내보내면서 이름을 바꾸기 + +export { myFunction as myFunc, myVariable as myVar}; + +비구조화로 내보내기 + +export const { name1, name2: bar } = o; + +Default + Named export import + +두 방식을 섞어서 사용할 수도 있다. (이 방식은 아직까지 사용해본 적은 없다) +function example1() { + console.log("example1"); +} + +function example2() { + console.log("example3"); +} + +function example3() { + console.log("example3"); +} + +export { example1 as default, example2, example3 }; +파일 구성과 모듈 조합 +현업에서는 하나의 목적을 가진 무수한 모듈들을 임포트하여 사용해야 하는 상황이 발생하는데, 이때 적절히 파일 구성을 해주어야, 코드 재사용성을 높일 수 있다. +예를 들어, 아래 사진처럼 ‘components’ 폴더 안에 ‘blocks’ 의 목적을 가진 여러 모듈 (Box, Hspace, Vspace)이 위치한다고 가정하고 page 컴포넌트에서 blocks 들을 가져와 사용하는 상황이라고 해보자. + +첫번째로 default export / import 를 사용하여 구성하는 방법이다. +// Box.tsx +const Box: React.FC = () =>

...

+ +export default Box; +// page.tsx + +import Box from 'src/components/blocks/Box'; +import Vsapce from 'src/components/blocks/Vsapce'; +import Hspace from 'src/components/blocks/Hspace'; +이 방법의 예상되는 단점은 다음과 같다. + +모듈 사용부에서 중복 경로를 매번 작성해주어야 함 + +import 시 변수명을 자유롭게 설정할 수 있기 때문에 개발자에 따라 명명 방법이 달라질 수 있음 + + +⇒ 리팩토링 비용 증가로 이어짐 +이를 보완해주려면, 모듈을 조합하는 방식을 사용하면 된다. 모듈 조합은 export 된 모듈들을 모아서 한 번에 +re-export 하는 방식이다. 즉, 아래처럼 Blocks 경로에 있는 Box, Vspace, Hspace 컴포넌트를 한 번에 불러올 수 있다. +import { Box, Vspace, Hspace } from 'src/compoentns/blocks' +모듈 조합을 적절히 사용한다면, 위 코드 처럼 중복 코드를 제거하여 필요한 모듈만을 불러올 수 있을 것이고 미리 정의된 이름을 사용하여 리팩토링 비용을 낮출 수 있을 것이다. +모듈 조합을 위해서는 index 파일을 사용한다. ES6에서 index 파일의 역할은 이 링크에서 자세히 알아볼 수 있다. + +In ES6, having an index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL. + +먼저 blocks 경로 하위에 index.ts 파일을 생성하고 export 된 모듈들을 다시 re-export 해준다. +이때 re-export 해주는 방식은 크게 2가지 이다. + +defined export 를 사용했을 경우 + +// Box.tsx +const Box: React.FC = () =>

...

+ +export default Box; + +‘as’ 키워드를 활용하여, 정의된 이름으로 모듈을 import 해올 수 있도록 한다. + +// components/blocks/index.ts +export { default as Box} from "./Box"; +export { default as Hspace } from "./Hspace"; +export { default as Vspace} from "./Vspace"; + +named export 를 사용했을 경우 + +// Box.tsx +export const Box: React.FC = () => <>...; +export const Flex: React.FC = () = + +// Hspace +exoort const Hspace : React.FC = () => <> ... +‘*’ 를 사용하여 named export 를 모두 내보낼 수 있다. +// components/blocks/index.ts + +export * from "./Box"; // Box 와 Flex 컴포넌트가 모두 내보내진다. +export * from "./Hspace"; +export * from "./Vspace"; +만약, 특정 모듈만을 pick하여 export 를 하고 싶다면 아래와 같이 작성해주면 된다. +export { Box } from "./Box"; +export * from "./Hspace"; +export * from "./Vspace"; +참고 자료 + +https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export +https://www.digitalocean.com/community/tutorials/react-index-js-public-interfaces +https://ko.javascript.info/import-export +https://jamesknelson.com/re-exporting-es6-modules/ + +