외부 컴포넌트 파일을 이용한 출력

외부 컴포넌트 파일을 이용한 출력

1. 외부 컴포넌트 파일을 이용한 출력

 - React는 외부 컴포넌트 파일을 이용하여 출력할 수 있음

 - 효율성이 높고, 수정이 용이함

 

2. 사용방법

 - 외부 파일을 하나 생성 (ex : HelloWorld.js)

 - 외부 파일에 다음과 같이 입력

 

 - HelloWorld.js에 다음과 같이 입력

import React from "react";

const HelloWorld = () => {
  return (
    <>
      <h1>Hello World!!</h1>
    </>
  );
};

export default HelloWorld;

 

 - App.js에 다음과 같이 입력

import React from "react";

// import로 외부 컴포넌트를 불러옴
import HelloWorld from "./HelloWorld";

// 외부 컴포넌트를 이용하려면, <파일명 /> 으로 입력해야 함
const App = () => {
  return (
    <>
      <HelloWorld />  
    </>
  );
};

export default App;

 

 - 출력 결과