React 컴포넌트 생성/사용 방법

1. 컴포넌트 만드는 방법

 

App.js에 들어가는 Hello 컴포넌트 (Hello.js파일) 을 생성한다.

Hello 컴포넌트

function Hello() {
  return (
    <div>
      <div>안녕!</div>
      <div>반가워! 리액트</div>
    </div>
  )
}
export default Hello

*주의* 컴포넌트를 생성 할 때 <div> 태그 하나만 들어가는게 아니라면 맨 위에<div> 태그로 묶어서 export 시켜주어야 한다. 

 

2. 사용법

App.js으로 가서 Hello 컴포넌트를 import한다. 

App.js

import logo from './logo.svg'
import './App.css'
import Hello from './Hello'

function App() {
  const hello = Hello()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{hello}</p>
      </header>
    </div>
  )
}

export default App

hello컴포넌트가 함수이기 때문에 import시 함수로 받아 사용한다.

 

 

만약 Hello.js 에서 컴포넌트를 두개를 만들어 보낼 수 도 있다.

Hello.js

 

Hello.js안에 컴포넌트를 Hello, Hello2를 만들어 export하여 보내 줄 수 있다.

 

App.js

컴포넌트를 두개 선언하여 사용이 가능하다.

 

*Hello2()는 전역으로 선언이 되어있지만 App에서 적용이 가능하다