리액트 함수형 컴포넌트 (React Functional Components)

리액트 함수형 컴포넌트

React Functional Components

리액트는 클래스형과 함수형 이 2가지 형식으로 컴포넌트를 만들 수 있습니다. 어떤 형식으로 작성하든 결국 모두 같은 내용을 표시합니다. 하지만 함수형 컴포넌트는 클래스형 컴포넌트보다 비교적 간결하게 기술할 수 있습니다. 그리고 요즘은 클래스형보다 함수형을 더 많이 사용하는 추세입니다. 다음 두 예제는 형태만 다를 뿐 모두 같은 내용을 렌더링합니다.

클래스형(ClassComponent.jsx)

import React, { Component } from 'react';

class ClassComponent extends Component{

render(){

return(

<div>

Hello, world!

</div>

);

}

}

export default ClassComponent;

함수형(FunctionalComponent.jsx)

import React from 'react';

const FunctionalComponent = () => {

return(

<div>

Hello, world!

</div>

);

}

export default FunctionalComponent;

다른 형태로 작성한 두 컴포넌트를 App.js에 불러와서 같은 내용을 출력하는지 확인합니다.

App.js

import React from 'react';

import FunctionalComponent from './basic/FunctionalComponent';

import ClassComponent from './basic/ClassComponent';

function App() {

return (

<div>

<FunctionalComponent />

<ClassComponent />

</div>

);

}

export default App;

결과

형태는 다르지만 결국 같은 내용을 출력한다는 것을 알 수 있습니다. 이렇듯 함수형은 클래스형보다 아주 간단하게 정의할 수 있습니다. 함수형은 클래스형과는 다르게 render()를 따로 작성하지 않고 바로 return을 합니다. 왜냐하면 함수형은 화면에 표시하기 위한 DOM 정보를 반환값으로 작성하기 때문입니다. 작성법은 일반적으로 함수 이름을 컴포넌트 이름으로 하며, 클래스형과 마찬가지로 첫 글자를 대문자로 정의하여 작성합니다.

ECMAScript2015 이후 구문이 확장되어 함수 선언을 다양하게 다룰 수 있게 되었습니다. 아래 예시를 참고하세요.

FunctionalComponent.jsx

import React from 'react';

function Children1(){

return <p>1: Hello, world!</p>

}

const Children2 = () => {

return <p>2: Hello, world!</p>

}

const Children3 = () => <p>3: Hello, world!</p>

const FunctionalComponent = () => {

return(

<div>

Hello, world!

<Children1 />

<Children2 />

<Children3 />

</div>

);

}

export default FunctionalComponent;

App.js

import React from 'react';

import FunctionalComponent from './basic/FunctionalComponent';

function App() {

return (

<div>

<FunctionalComponent />

</div>

);

}

export default App;

결과