[React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ①

 리액트 기초 시간에 Input 컴포넌트로 아이디, 비번 입력창을 만들어 봤었는데 기억이 나시나요? 그때에는 InputComponent에 모든 기능을 넣었지만, 컴포넌트의 재활용 측면에서는 쓸 수가 없는 소스 코드입니다. 그래서 오늘은 하이오더 컴포넌트의 개념을 배우고, 다음 시간에는 Input 컴포넌트를 확장해보겠습니다.

 

import React from "react";
import Text from "Text";
import Button from "Button";
import Input from "Input";

// HoC 기본 골격
export default function withExtend(BaseComponent) {
  return class withExtend extends React.Component {
    render() {
      return <BaseComponent {...this.props} />;
    }
  };
}

// 사용 예시
const TextWithExtend = withExtend(Text);
const ButtonWithExtend = withExtend(Button);
const InputWithExtend = withExtend(Input);

 

 가장 기본적인 하이오더 컴포넌트의 구조입니다. 이름이 거창해서 그렇지 쉽게 말하면, 높은 위치에서 다른 컴포넌트를 품고 있는 함수형 컴포넌트입니다. 지난 시간에 컴포넌트에 스타일을 적용해봤었는데, 사실 우리는 이미 하이오더 컴포넌트를 사용해서 스타일을 붙이고 컴포넌트를 확장한 것입니다. 그럼 아래 코드를 한번 보시죠!

 

// ..\test_project\src\components\Button.jsx

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import withStyles, { css } from "../styles/withStyles";

class Button extends PureComponent {
...
// withStyles()함수를 사용해 defaultStyles.js 내용으로 매칭
export default withStyles(({ color, size, screen }) => ({
  default: {
    color: color.default,
    borderColor: color.black,
    backgroundColor: color.white,
    fontSize: size.medium,
    padding: 5,
    border: 2,
    borderRadius: 5,
    borderStyle: "solid",
    cursor: "pointer",
    [screen.small]: {
      width: "100%",
    },
  },
...
}))(Button);	// <- 바로 이 부분입니다!!!

 

 바로 전 포스팅에서 배웠던 부분인데, 맨 마지막 줄에 (Button) 을 감싼 부분이 있습니다. 그렇습니다! withStyles() 함수가 하이오더 컴포넌트입니다. Button 컴포넌트를 withStyles 컴포넌트와 합쳐서(함께) 스타일을 적용한 것입니다. 이 처럼 HoC는 암묵적으로 with라는 단어를 붙여쓰기 때문에, 함수명으로도 어느 정도는 분간이 가능합니다.

 

다음에는 Input 컴포넌트를 직접 확장해보면서 좀 더 심도 있는 시간을 가져보도록 하겠습니다.

 

참 쉽나요?

---

2020/10/12 - [Web프론트엔드/리액트] - [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ②