[React] 함수형 컴포넌트 사용하기

 

함수형 컴포넌트

클래스형 컴포넌트는 state, 라이프 사이클 기능, render 함수 등을 제공해줍니다. 

함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없습니다.

하지만, 함수형 컴포넌트는 이러한 기능들을 제공하진 않지만 hook의 도입으로 해결이 가능하게 되었습니다.

공식문서에는 클래스형 컴포넌트보다는 함수형 컴포넌트와 hook을 사용하는 것을 권장하고 있습니다.

상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하기 때문에 render() 함수가 없으므로 return만 사용해 화면을 그려줍니다. 따라서, 클래스형 컴포넌트보다 선언도 편하고 메모리 사용도 덜한 효과를 갖고 있습니다.

 

 

소스 예제

함수형 컴포넌트를 사용하는 간단한 코드를 보며 살펴보겠습니다.

 

App.js (상위 컴포넌트)

import FuncComponent from './Component/FuncComponent'

function App() {
  return (
    <div>
      <h1>코딩병원에 오신 것을 환영합니다.</h1>
      <FuncComponent content="함수형 컴포넌트"></FuncComponent> // content 변수를 props로 전달
    </div>
  );
}

export default App;

 

FuncComponent.js (하위 컴포넌트)

import React from 'react';

function FuncComponent(props) {
    let { content } = props; // 상위 컴포넌트에서 전달받은 props 할당
    
    return(
        <div style={{color: 'blue'}}>
            {content}
        </div>
    )

}
export default FuncComponent;

 

출력 화면

 

상위 컴포넌트에서 props를 전달하는 부분은 클래스형 컴포넌트와 다른게 없습니다.

하위 컴포넌트의 함수형 컴포넌트는 클래스형 컴포넌트와 달리, props앞에 this가 붙지 않습니다.

또한, return 값이 있는 function과 동일한 구조를 갖고 있습니다.

 

 

References

react.org