HOC 1

• HOC 의 원리는, 파라미터로 컴포넌트를 받아오고, 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링하는 것입니다. 그리고, 자신이 받아온 props 들은 그대로 파라미터로 받아온 컴포넌트에게 다시 주입해주고, 필요에 따라 추가 props 도 넣어줍니다 (예를들어 우리의 경우엔 웹요청 결과물이 되겠죠)
• 반복되는 구조를 이용하는 컴포넌트가 있을때 유용하다
• Hooks의 세계 에서는 반복 구조를 쉽게 커스텀 훅을 만들어서 이용가능하기에 굳이 안쓰는듯하다

보통 with.. 로이름을 짓는다

import React, { Component } from 'react';
import axios from 'axios';

const withRequest = (url) => (WrappedComponent) => {
  return class extends Component {

    state = {
      data: null
    }

    async initialize() {
      try {
        const response = await axios.get(url);
        this.setState({
          data: response.data
        });
      } catch (e) {
        console.log(e);
      }
    }

    componentDidMount() {
      this.initialize();
    }

    render() {
      const { data } = this.state;
      return (
        <WrappedComponent {...this.props} data={data}/>
      )
    }
  }
}

export default withRequest;

쓸때

import React, { Component } from 'react';
import withRequest from './withRequest';

class Post extends Component {
  render() {
    const { data } = this.props;
    
    if (!data) return null;

    return (
      <div>
        { JSON.stringify(this.props.data) }    
      </div>
    );
  }
}

const PostWithData = withRequest('<https://jsonplaceholder.typicode.com/posts/1>')(Post)
export default PostWithData;

코드 스플릿팅 1 2

[기본적 코드 스플릿팅]

• 함수를 스플릿팅

  import React, { Component } from 'react';
  
  class App extends Component {
    handleClick = () => {
   // import() 문법은 아직 정식문법은 아니다!
      import('./notify').then(({ default: notify }) => {
  		// 클릭시에 임포트해서 거기있는 export된 함수를 이용
        notify();
      });
    };
    render() {
      return (
        <div>
          <button onClick={this.handleClick}>Click Me</button>
        </div>
      );
    }
  }
  
  export default App;
  

• 컴포넌트를 스플릿팅

  import React, { Component } from 'react';
  
  class App extends Component {
    state = {
      SplitMe: null
    };
    handleClick = () => {
      import('./SplitMe').then(({ default: SplitMe }) => {
  			// 클릭시 컴포넌트 가져와서 import하고 state에 저장
        this.setState({
          SplitMe
        });
      });
    };
    render() {
      const { SplitMe } = this.state;
      return (
        <div>
          <button onClick={this.handleClick}>Click Me</button>
          {SplitMe && <SplitMe />}
        </div>
      );
    }
  }
  
  export default App;
  

• HOC이용해서 스플릿팅

  // HOC 만들기
  
  import React, { Component } from 'react';
  
  const withSplitting = getComponent => {
    // 여기서 getComponent 는 () => import('./SplitMe') 의 형태로 함수가 전달되야합니다.
    class WithSplittingComponent extends Component {
      state = {
        Splitted: null
      };
  
      constructor(props) {
        super(props);
        getComponent().then(({ default: Splitted }) => {
          this.setState({
            Splitted
          });
        });
      }
  
      render() { // 내부에서 렌더링
        const { Splitted } = this.state;
        if (!Splitted) {
          return null;
        }
        return <Splitted {...this.props} />;
      }
    }
  
    return WithSplittingComponent;
  };
  
  export default withSplitting;
  

  // HOC 이용해서 스플릿팅
  
  import React, { Component } from 'react';
  import withSplitting from './withSplitting';
  
  const SplitMe = withSplitting(() => import('./SplitMe'));
  // 렌더할 해당 컴포넌트 넣어주기
  
  class App extends Component {
    state = {
      visible: false
    };
    handleClick = () => {
      this.setState({
        visible: true
      });
    };
    render() {
      const { visible } = this.state;
      return (
        <div>
          <button onClick={this.handleClick}>Click Me</button>
          {visible && <SplitMe />}
        </div>
      );
    }
  }
  
  export default App;
  

• 리액트 라우터에서 이용하기

  import withSplitting from '../withSplitting';
  
  export const Home = withSplitting(() => import('./Home'));
  export const About = withSplitting(() => import('./About'));
  // 이런식으로 컴포넌트 임포트 미리 만들어둔 HOC함수 이용해서 넣어준다
  

  import React, { Component } from 'react';
  import { Route, Link } from 'react-router-dom';
  import { About, Home } from './pages';
  // 데려와서 컴포넌트 이용, 해당 링크 들어가야지 컴포넌트 임포트해서 이용하게된다
  
  class App extends Component {
    render() {
      return (
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
          <hr />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      );
    }
  }
  
  export default App;