[React] Stateless Component

React에서 component 내부에서 state를 사용하지 않는 component. 즉, 리렌더링이 다시는 일어나지 않는 component 같은 경우 함수형 컴포넌트(Functional Component, Stateless Component)를 이용하여 구현하면 아주 쉽다.

구현방법

import React from 'react';

const Hello = () => (
  <h1>hello</h1>
);

export default Hello;

기본적인 구현방법은 위와 같다. 변수에 함수를 선언해주면 되며, 함수 내부에서는 화면에 보여질 JSX를 작성해 주면 된다.

props 사용하기

함수형 컴포넌트에서도 부모에게서 전달받은 props를 사용할 수 있다.

import React from 'react';

const Hello = ({ children }) => (
  <div>{children}</div>
);

export default Hello;

위 예제는 굳이 component를 만들지 않아도 되는 상황이지만 props 예제를 보여주기위함이니 이해해주길 바란다.

함수형 컴포넌트에서 props를 사용하기 위해서는 파라미터에 비구조화 할당 (Object Destructuring) 문법을 사용하여 쉽게 만들 수 있다.

결론

React로 페이지를 구현할 때 component 내부에서 렌더링되는 JSX는 적을 수록 좋다. 즉, component를 잘게 쪼개면 좋다는 뜻이다. (그래야 공통 component가 많아진다.) 하지만, Class Component 인 extends Component로만 component를 만들면 오히려 성능 악화가 된다. (필자도 경험해 봄...) 따라서, state나 라이프아시클 API를 전혀 사용하지 않을 때, 함수형 컴포넌트를 사용하면 유지보수에도 좋고 페이지 성능에도 좋다.

추가로

아직 React에 정식 Release된 기능은 아니지만, 최근 github에서 이슈였고 아직도 이슈인 React Hooks기능을 사용하면 함수형 컴포넌트에서도 state를 사용할 수 있다. 자세한 내용은 React Blog를 참고하길 바란다.