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

---

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

---

 

안녕하세요.

고코더 입니다.

 

 

● 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.

 

---

마무리

---

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