다른 파일 참조 시키기 (component 분리)

Box.js (컴포넌트 파일)

import React from "react"; // 리액트 파일 선언

function Box(props) { // props가 파라미터 형식으로 들어가나 봄
  return <div className="box1">{props.name}</div>;
}

export default Box; // 뭘로 수출 (내보낼건지)

props.name? // Box의 네임 값을 보내겠다

<Box name = "민혁"/> <Box name = "DAVID"/>

---------------------------------------------------------------

App.js (컴포넌트 적용할 파일)

import Box from "./Box.js"; // Box라는 컴포넌트를 from (경로로 부터 참조하겠다.)
export default Box; // Box 컴포넌트를 내보내겠다. => 다른 컴포넌트가 이용할 수 있게 변