React - (2) 컴포넌트

컴포넌트

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
출처 : 공식문서

리액트에서 컴포넌트의 종류는 2가지가 있다. 함수형과 클래스형 이다.
다만, 버전 16.8 에 새로 도입된 Hooks 으로 인해 함수형 컴포넌트에서 클래스형 컴포넌트의 대부분의 작업을 할 수 있기 때문에 클래스형 컴포넌트는 넘어가자.

기본 형태

// src/Hello.js
import React from 'react'

function Hello() {
  return (
    <div>
      <h1>
        This is Hello Component
      </h1>
    </div>
  )
}

export default Hello;

혹은 화살표 함수(Arrow Function)로도 표현할 수 있다.

import React from 'react'

const Hello = () => {
  return (
    <div>
      <h1>
        This is Hello Component
      </h1>
    </div>
  )
}

export default Hello;

먼저 컴포넌트를 만들 때에는

import React from 'react' 

로 리액트 모듈을 불러와야 한다.

export default Hello;

생성한 Hello 컴포넌트를 내보겠다는 의미로 다른 컴포넌트에서 이 컴포넌트를 사용하기 위해서 필요한 코드이다.

컴포넌트 불러오기

다른 컴포넌트(App) 에서 Hello 컴포넌트를 불러와서 사용해보자.

// src/App.js
import React from 'react'
import Hello from "./Hello";

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

export default App;

먼저, 다른 컴포넌트를 불러와야한다.

import Hello from "./Hello";

<컴포넌트 /> 의 형태로 렌더링 코드 내에서 사용한다.

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