React Component 생성 및 사용

React Component

리액트 컴포넌트는 html 요소들을 반환하는 것이라고 할 수 있다.

컴포넌트는 만들고 싶은 만큼 만들고, 각각 파일로 분리해서 관리한다.
하지만 React application은 한 번에 하나의 컴포넌트만 rendering 할 수 있다.
따라서 모든 것은 App.js에 모두 들어가야하고, 이 application 안에서 많은 컴포넌트를 넣고 import할 수 있다.

 

그리고 컴포넌트는 일종의 UI 조각이라고 할 수 있다. 따라서 쉽게 재사용이 가능하다.

컴포넌트 여러 곳에서 여러 번 불러와서 사용할 수도 있다는 것이다.

 

 

React Component 생성

 

1. src 디렉토리에 Hello.js 파일 추가

 

2. import & 함수 또는 클래스 형태 & export 코드 작성

 

Hello.js

import React from 'react';

function Hello() {
  return <div>안녕하세요 여러분</div>
}

export default Hello;

import React from 'react';
: 이 코드가 없으면 react는 이 파일의 component 사용을 이해하지 못한다.

 

function Hello() {

: 이렇게 생긴 것을 functional component라고 하고 대문자로 이름짓는다

 

return 안에는 html element를 작성한다.

그리고 항상 하나의 태그로 묶여있어야 한다.

코드를 보기 쉽게 하는 경우에는 ( ) 괄호를 사용하여 코드 전체를 묶어준다.

 

export default Hello;

: Hello 라는 컴포넌트를 내보낸다는 의미이다.

이 코드를 쓰면 다른 컴포넌트에서 Hello 컴포넌트를 불러와서 사용할 수 있다.

 

 

React Component 사용

 

App.js

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

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

 

import Hello from './Hello';

: 같은 폴더 내에 있을 경우 ./ 뒤에 파일명을 작성한다.

js파일은 파일명 뒤에 js 생략해도 된다.

 

<Hello />

: Hello 컴포넌트 불러와서 사용하기

 

 

React Component는 어디에서 렌더링 될까?

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ReactDOM.render 은 실제 DOM 내부에 App 컴포넌트를 렌더링 하겠다는 것을 의미한다.

 

현재 id가 root인 DOM에 렌더링하겠다는 코드인데,

이 DOM은 public 디렉토리에 있는 index.html 파일을 열어보면 아래의 div DOM을 의미한다.

<div id="root"></div>

 

즉,  index.html 의 id가 root인 div 요소 내부에 App 컴포넌트가 렌더링 되는 것이다.