본문 바로가기
IT_Developers/React

React.js - 리액트, 함수형 컴포넌트(Functional Component)란?

by 고코더 2021. 2. 12.

함수형 컴포넌트를 사용하기


 

안녕하세요.

고코더 입니다.

 

 

 1. 이번 시간에는 컴포넌트의 종류 중에 하나인 함수형 컴포넌트(Component)를 알아보도록 하겠습니다. v16.8 버전 이전까지는 클래스형 컴포넌트를 사용했었지만 이후부터는 함수형 컴포넌트에 훅을 지원해주어서 함수형 컴포넌트를 함께 사용할 것을 공식 문서에서 권장하고 있습니다. 

 

 

 2. 먼저 가장 기초적인 사용 방법을 알아봅니다. 이미 이전 소스에서도 많이 보아왔던 방식입니다. 지금까지 저와 함께 했던 이 방식이 바로 함수형 컴포넌트를 생성하는 방식이었습니다.

 

2번 라인 : 함수형으로 function을 선언한다.

// 보통의 방식
function Guest(props) {
    return (
        <h1>Hi! {props.name}</h1>
    );
}

 

 3. 만약 컴포넌트가 라이프사이클 API 도 사용하지 않고, props 만 전달해주는 역할이라면 state 도 사용하지 그저 뷰를 렌더링만 해주는 역할일 경우 함수형 컴포넌트를 정의하는 게 유리합니다. 이번에는 ECMAScript 6의 화살표 함수를 사용하여 컴포넌트를 생성할 수 있는 방법의 예제를 작성해봅니다.

 

2번 라인 : ECMAScript 6의 비구조화 할당을 사용하는 방식입니다. 

// ECMAScript 6 화살표 방식
const Type = (props) => {
    return (
        <h1>{props.name} 컴포넌트!</h1>
    );
}

 

 4. 코드펜에서 함수형 컴포넌트 예제를 확인 해보세요.

See the Pen 함수형 컴포넌트 실습 by GoCoder (@gocoder-net) on CodePen.

 


마무리


컴포넌트를 정의하는 가장 단순한 방법 입니다.

 

댓글