본문 바로가기
[ Programming ] Basic/React

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

by the_little_coder 2020. 2. 4.

리액트 함수형 컴포넌트

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;



결과


댓글