[React] Component File 분리

 

📌 개념

---

 

만약 하나의 파일안에 천 개가 넘는 컴포넌트들이 있다면 얼마나 복잡할까요?

App.js에 컴포넌트가 있다보니 다른 파일들은 접근해서 사용하기가 어려운 것이에요.

이를 해결하기 위해 src에 특정 디렉터리를 만들고, 그 안에 각각의 컴포넌트 별로 각각 파일로 따로 만드는 것이 방법이랍니다.

먼저 각 Component를 지정한 js파일 안에 넣는데, React import를 위해 최상단에 아래와 같이 적어줘야 하는 것이에요.

import React, { Component } from "react";

그런 뒤 맨 마지막에 다른 파일들도 해당 컴포넌트를 사용할 수 있도록 하기 위애 맨 마지막에 아래 코드를 넣어줘야 하는 것이에요.

export default [컴포넌트 이름];

반응형

그렇게 한 뒤 이 컴포넌트를 사용할 곳 상단에 아래 코드를 추가하여 주면 된답니다.

import [컴포넌트 이름] from "./[컴포넌트가 있는 디렉터리 이름 / 컴포넌트 이름];

 

 

 

 

---

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글 그리고 방명록은 주니하랑에게 많은 힘이 됩니다