React | HOC

Intro 🌼

HOC...
React 공식문서 들어가면 설명이 아주 잘되어 있지...
근데, 나만의 방식으로 이해하는게 필요하니깐~

구조 😁

사실 잘 안쓴다...
가끔 아주 가끔 쓰는데... 로직이 반복되는 컴포넌트가 많을 경우에 쓴다. 사실 그것도 hook으로 빼서 사용하다보면, 그것도 거의 안쓰게 되지만...

Test.js

import React from "react";
import withLoading from "./withLoading";

const TestPage = (props) => {
  return <div>TesPage</div>;
};

export default withLoading(TestPage);

Test2.js

import React from "react";
import withLoading from "./withLoading";

const Test2Page = (props) => {
  return <div style={{border:"1px solid red"}}>Tes2Page</div>;
};

export default withLoading(TestPage);

두개의 컴포넌트가 있다고 가정했을 때,(Test.js, Test2.js) 이름에서도 느껴지듯이 로직은 같은데, 화면이 다를 수 있는 경우가 있다. 이럴때 HOC가 개 꿀템이다.

const withLoading = (WrappedComponent) => (props) => {

// 여기서 로직 처리해줌~props 받아서~
  return <WrappedComponent {...props} />;
};

export default withLoading;

보통 HOC를 사용하면 with를 붙여서 사용한다.
사용방법은 여러가지인데, TestPage로 props를 아래처럼 넘겨도 되고,

import React from "react";
import "./App.css";
import TestPage from "./components/TestPage";

function App() {
  return <TestPage type={"test"} />;
}

export default App;

아니면 해당컴포넌트에서 아래처럼 url를 바~로 넘길수도 있다.

const withLoading = (WrappedComponent, url) => (props) => {
  console.log("type", props.type); //여기서 로직을 처리해야 함.
  console.log("url", url);

  return <WrappedComponent {...props} />;
};

export default withLoading;

import React from "react";
import withLoading from "./withLoading";

const TestPage = (props) => {
  return <div style={{ border: "1px solid red" }}>TesPage</div>;
};

export default withLoading(TestPage, "url");

이게 구조가...App.js에서 TestPage로 props를 넘길 때, withLoading을 거쳐서 Test.js 로 넘긴다고 보면 된다. 그래서 관련 로직들을 withLoading에서 처리해도 TestPage에 반영 할 수 있다.

TestPage(App.js) => withLoading(TestPage) => TestPage.js

결론

사실... (WrappedComponent) => (props)이게 생소해서 그렇지...그렇게 어렵지 않다.
하다보면 된다. 그냥 하면 됨.