React 기초 (2) : Component 기본 사용

src/App.js

import React from 'react';

function App() {
  return <h1>Hello React</h1>
}

export default App;

• 위의 파일은 App이라는 component이다.
• component란 html 을 반환하는 함수이다.
• 외부에서 사용할 수 있도록 함수를 export한다.

---

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // ---(1)

ReactDOM.render(
    <App /> // ---(2),
  document.getElementById('root')
);

• (1) 생성한 component를 사용하기 위해서 import 한다.
• (2) HTML 형식으로 component를 사용한다.

---

잘못된 src/App.js

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <h1></h1>
    <Potato />
  )
}

export default App;

• 위와 같이 작성하면 아래와 같은 오류가 발생한다.

  JSX expressions must have one parent element.

• 하나의 컴포넌트엔 root element가 하나만 있어야 한다.
• 위의 코드는 h1 과 Potato 두 개의 element가 최상단에 있기 때문에 오류가 발생한 것이다.

---

수정한 src/App.js

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div>
      <h1></h1>
      <Potato />
    </div>
  )
}

export default App;

• 두 개의 element를 하나의 div로 감싸주면 최상단 element는 하나가 되어 오류가 발생하지 않는다.