<React> Component 생성

Component는 JSX를 반환하는데요. html과 매우 유사하지만 html과는 다른점이 있습니다. 또한 브라우저가 JSX를 이해하기 위해선 트랜스파일러인 BABEL이 필요합니다.

project

project
  |--src
    |--Component.jsx
    |--app.jsx

Component.jsx

Component로 인식하기 위해선 'react'를 import 해주어야 했는데 현재는 자동으로 import 해주기 때문에 따로 안해주어도 된다고 합니다. 정확히 말하면 따로 import해주지 않아도 import해준다고 합니다.

import React from 'react';

function Component(){
  return (<h1> I am Component </h1>);
}

export default Component;

App.js

index.js에서는 App Component 하나만 rendering 해주는게 좋습니다. 따라서 새로 만든 Component를 App.js에 넣어주도록 하겠습니다. 아래 코드를 보면 div태그에 className이라는 property를 정의해주는데요. JSX와 html이 구분되는 점중 하나입니다. class를 className으로 표현하죠. class를 className으로 표현하는 이유는 javascript의 class와 구분하기 위해서입니다.

import Component from './Component';

function App(){
  return (
    <div className="App">
      <Component />
    </div>
  );
}

export default App;

결과

새로 생성한 Component를 포함한 App Component가 정상적으로 rendering되는 것을 확인할 수 있습니다.