F.E/React
[React] 컴포넌트 빌드하기
pinomaker
2022. 5. 2. 14:35
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. 결과