HOC(Higher-order-Component) 고차컴포넌트

HOC에 대해서 기록을 남기지만 어떠한 설명 보다 코드로 남기겠다.

App.js

import "./App.css"
import Person1 from "./Person1"
import Person2 from "./Person2"

function App() {
  return (
    <div className="App">
      <h1>Auction</h1>
      <Person1 />
      <Person2 />
    </div>
  )
}

export default App

person1.js

import React from "react"
import updatedComponent from "./HOC"

const Person1 = (props) => {
  return (
    <div>
      <h2>지미는 {props.money}달러를 헌금했어요</h2>
      <button onClick={props.handleIncrease}>Increase Money(비용증가)</button>
    </div>
  )
}

export default updatedComponent(Person1)

person2.js

import React from "react"
import updatedComponent from "./HOC"

const Person2 = (props) => {
  return (
    <div>
      <h2>존은 {props.money}달러를 헌금했어요</h2>
      <button onClick={props.handleIncrease}>Increase Money(비용증가)</button>
    </div>
  )
}

export default updatedComponent(Person2, "a")

HOC.js

import React, { useState } from "react"

const updatedComponent = (OrignalComponent, a = null) => {
  function NewComponent() {
    const [money, setMoney] = useState(10)
    const handleIncrease = () => {
      setMoney(money * 2)
    }
    if (a === "a") {
      return "하하"
    }
    return <OrignalComponent handleIncrease={handleIncrease} money={money} />
  }
  return NewComponent
}

export default updatedComponent