[React] 컴포넌트 빌드하기

01. src 폴더 안에 components 폴더 생성 후 Hello.js파일 생성

cd src
mkdir components
cd components
touch Hello.js

 

 

02. Hello Function 생성 후 <h1> Tag 반환

export default function Hello () { //1
    return(
        <div>
            <h1>Hello React</h1>
        </div>
    )
}

//1 export default 설정을 해두면 해당 파일을 읽을 때 기본적으로 해당 함수(Hello)를 호출한다.

 

03. App.js에서 호출하기

import Hello from "./components/Hello"; //1

export default function App() {
  return (
    <div>
      <Hello /> //2
    </div>
  )
}

//1 import from을 사용하여 Hello 파일을 가져온다.

//2 Hello 파일을 태그 방식으로 호출한다.

 

04. 결과