[React] 컴포넌트 빌드하기

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

      

      

      

    
    

      <bash />
    
cd src
mkdir components
cd components
touch Hello.js

 

 

2. 02. Hello Function 생성 후

Tag 반환

      

      

      

    
    

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

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

 

3. 03. App.js에서 호출하기

      

      

      

    
    

      <javascript />
    
import Hello from "./components/Hello"; //1

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

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

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

 

4. 04. 결과