React 기초 - Component 생성하기

Componet란?

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

• index.js의 <App />가 Component이다.
• Component는 React의 기본단위로서 React는 Component와 함께 동작한다.

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

• Component는 App.js의 function App()과 같이 HTML을 반환하는 함수가 Componet가 된다.
• 즉, App.js의 App이라는 Component를 index.js에서 <App />의 형태로 불러와 활용하는 것이다.

---

JSX

• Javascript 파일인 index.js에서 App을 'App'이라고 표현하지 않고 <App />과 같이 표현했다.
• 이러한 케이스에서의 Javascript와 HTML의 조합을 JSX라고 부른다.
• Javascript 안의 HTML이라고 이해하면 편하다.
• 이는 React에서만 사용하는 개념이다. 하지만 React에선 핵심이 되는 개념이니 잘 알아두자.

---

Componet 생성하기

import React from "react";

function New() {
    return (
        <div className="New">Wow</div>
    );
}

export default New;

• 반드시 react 모듈을 React로 import해주어야 JSX 처리가 가능해진다.
• 위와 같이 function을 작성 후 export해준다.

import New from './new';

ReactDOM.render(
  <New />,
  document.getElementById('root')
);

• 이를 index.js에서 import하고 위와 같은 형식으로 사용하면 된다.
• 하나의 React application에서는 하나의 Component만 redering할 수 있다.
• 즉, 두 개 이상의 Component를 rendering하는 것은 불가능하다.

import React from "react";
import New from "./new";

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <New />
    </div>
  );
}

export default App;

• 다른 Component에서도 JSX를 이용해 위와같이 표현하여 사용할 수 있다.
• 여러 Componet를 사용하는 경우엔 이와 같은 방식을 사용한다.
• 이 경우 Component 속에 Componet를 넣은 것이 된다.
• cf. 이번 케이스에서는 새로운 Componet의 js파일을 따로 만들고 여기서 Componet를 모듈화하여 export, import 해주는 방식을 사용했지만 하나의 js파일에서 Component들을 작성하고 활용해도 무방하다.