이번 편에서는 React에서의 Function 컴포넌트를 작성하는 방법을 알아보겠습니다.

• Class 컴포넌트
• Function 컴포넌트

React에서 컴포넌트는 위처럼 2종류가 있습니다. 이 중에서 Function 컴포넌트만 소개할 예정이며, 이 이후의 내용에 나오는 모든 컴포넌트는 특별한 언급이 없으면 Function 컴포넌트입니다.

• Class 컴포넌트는 본 강좌를 끝낸 이후에 익혀도 늦지 않습니다.

Function 컴포넌트

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>app</div>

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

<div>app</div>

굉장히 간단하게 생긴 이 코드가 React에서의 Function 컴포넌트입니다.

하나씩 살펴보자면 const는 변수를 선언하기 위한 키워드이고, App은 변수의 이름이자 컴포넌트의 이름이며, () => 부분은 함수를 표현하는 부분이고, <div>app</div> 부분은 JSX를 return 합니다.

거칠게 표현하자면 JSX를 return 하는 함수는 컴포넌트입니다.

이렇게 작성한 컴포넌트는 ReactDOM.render 메서드를 이용하면 root 아이디를 가진 태그 안에 2번째 코드처럼 나타납니다.

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => (
  <div>welcome to React</div>
)

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

컴포넌트는 앞뒤를 둥근 괄호로 감싼 형태로도 작성할 수 있습니다.

둥근 괄호를 앞뒤로 감싸는 방식으로 작성하면 코드를 읽을 때에 굉장히 편하기 때문에 이 형태로 작성하는 분이 많습니다.

import React from 'react'
import ReactDOM from 'react-dom'

const Welcome = () => <h1>welcome to React</h1>

const App = () => (
  <div>
    <Welcome />
  </div>
)

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

<div>
  <h1>welcome to React</h1>
</div>

작성한 컴포넌트는 다른 컴포넌트에서 재사용할 수 있으며, HTML에는 2번째와 같이 보입니다.

• Vue, Angular 등 여타 MVC 프레임워크를 해본 분이라면 굉장히 신선할 것입니다. 컴포넌트를 따로 등록해주거나 하는 등 그런 동작 없이 바로 사용할 수 있는 부분이 특히 독특합니다.

못 다한 이야기

1. React 초창기(v15)부터 React Hooks가 공식적으로 등장한 버전인 v16.8 이전까지는 Class 컴포넌트와 Function 컴포넌트를 다음 챕터에서 소개할 상태를 가질 수 있음을 유무로 각각 Smart 컴포넌트와 Dumb 컴포넌트라고 구분을 하기도 했습니다. 어감이 매끄럽지는 않기 때문에 React v16 즈음부터 Presenter와 Container로 구분해 부르기도 했습니다.

   React v16.8 이후에는 Function 컴포넌트도 상태를 가질 수 있으므로, 상태의 유무를 기준으로 Smart 컴포넌트와 Dumb 컴포넌트로 구분하는 방법은 자연스럽게 의미를 잃었다고 할 수 있습니다.