👨🏻‍💻 stateful logic sharing

어떠한 데이터를 유동적으로 전달하기 위하여 state를 사용한다.
state는 한 부분에서만 쓰는 것이 아니라 여러 부분으로 전달하여 사용한다.
이러한 state를 어떻게 효율적으로 여러 부분에서 쓸 수 있는지 알아보자.

✔️ stateful logic

stateful logic이란 state를 사용하는 코드를 말한다.

✔️ stateful logic sharing

stateful logic sharing이란 여러 컴포넌트들이 어떠한 state를 공유하여 쓰는 것을 말한다.

stateful logic sharing을 위하여 props로 state를 전달하는 방법이 있다.

🚩 props로 state 전달

App.js

import React, { Component } from "react";
import Passprops from "./Passprops";
import Passprops2 from "./Passprops2";

class App extends Component {
  state = {
    number: 0,
  };
  render() {
    return (
      <div>
        <Passprops number={this.state.number} />
        <Passprops2 number={this.state.number} />
      </div>
    );
  }
}

export default App;

Passprops.js

import React, { Component } from "react";

class Passprops extends Component {
  render() {
    return <div>Passprops1:{this.props.number}</div>;
  }
}

export default Passprops;

Passprops2.js

import React, { Component } from "react";

class Passprops2 extends Component {
  render() {
    return <div>Passprops2:{this.props.number}</div>;
  }
}

export default Passprops2;

다음과 같이 App.js에 있는 state값을 여러 컴포넌트가 공유할 수 있다.
(stateful logic sharing)

하지만 만약 부모 컴포넌트가 다르다면 state를 쓸 수 없다.
즉, 위의 예를 참고하자면 App.js에서 컴포넌트를 언급하지 않는다면 그 컴포넌트는 App.js에 있는 state를 쓸 수 없는 것이다.

이를 위한 방법으로 HOCs와 render props가 제안된다.

---

🩺 stateful logic sharing solution

1. HOCs(Higher Order Components)

HOCs는 어떠한 컴포넌트를 더욱 향상된 컴포넌트로 변형해주는 함수이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

• HOCs는 stateful logice sharing의 해결법으로 많이 쓰인다.
• HOCs함수에 인수로 state를 쓰고자하는 컴포넌트를 할당한다.
• HOCs는 API가 아닌 구성을 하기 위한 패턴이다.
  
  

다음은 stateful logice sharing을 위한 HOCs의 패턴 예시이다.

App.js

import React from "react";

function withCounter(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        count: 0,
      };
    }

    increment = () => {
      this.setState((prevState) => ({ count: prevState.count + 1 }));
    };

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

class Component1 extends Component {
  render() {
    const { count, increment } = this.props;
    return (
      <div>
        <button onClick={increment}>Clicked {count} times!</button>
      </div>
    );
  }
}


export const DerivedComponent = withCounter(Component1);

index.js

import React from "react";
import ReactDOM from "react-dom";
import { DerivedComponent } from "./App";

ReactDOM.render(
  <React.StrictMode>
    <DerivedComponent />
  </React.StrictMode>,
  document.getElementById("root")
);

✏️ 사용법

위와 같이 withCounter함수(HOCs함수)는 컴포넌트(Component1)를 인수로 받는다.
컴포넌트(Component1)는 state를 전달받아 사용할 수 있다.

HOCs함수(withCounter)의 반환값을 state를 전달받는 컴포넌트(DerivedComponent)에 할당한다.

이와 같이 HOCs는 state를 전달해주는 함수로직을 구성해주어 함수에 인수로 컴포넌트만 대입해주면 state를 사용하게 해주는 stateful logic sharing의 방법중 하나이다.

더불어 HOCs 패턴은 stateful logic sharing뿐 아니라 다른 효율적인logic을 구성하기위해서도 쓰인다.

❗️ 주의사항

HOCs함수를 구성할 때 주의해야할 사항들은 다음과 같다.

• HOC 내부에서 컴포넌트의 변형시키지 않아야한다.
  이는 컴포넌트를 따로 사용할 때에도 해당 컴포넌트가 영향을 받을 수 있다.

• render()에 HOCs를 사용하면 안된다.
  render()는 이전 트리와 비교하여 이전것을 unmount하고 변화된 것을 반영하는데 여기에 HOCs로 감싼 컴포넌트를 사용한다면 전의 state값이 unmount되고 하위 컴포넌트들도 unmount될 수 있다.

2. render props

stateful logic sharing의 두번째 방법으로는 render props가 있다.

render prop은 prop으로 렌더할 내용을 할당해주는 것이다.

예시는 다음과 같다.
우선 Counter라는 컴포넌트를 만들어준다.

Counter.js

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return <div>{this.props.render(this.state.count, this.increment)}</div>;
  }
}

export default Counter;

count라는 state와 state를 변경해주는 increment 함수를 만들어준다.

렌더부분에는 부모컴포넌트에서 언급한 render라는 props를 받아 인자로 count와 increment를 할당해준다.

부모컴포넌트는 다음과 같다.

App.js

import React from "react";
import Counter from "./components/Counter";
import ButtonCounter from "./components/ButtonCounter";


// prop으로 렌더링할 내용을 전달?
const App = () => {
  return (
    <div>
      <Counter
        render={(count, increment) => (
          <ButtonCounter count={count} increment={increment} />
        )}
      />
    </div>
  );
};

export default App;

부모컴포넌트(App.js)에서는 Counter 컴포넌트에 render라는 props를 전달해주고 내용은 두개의 인자를 갖는 함수를 전달해준다.

함수의 반환값은 state를 전달받는 새로운 컴포넌트(ButtonCounter)를 반환해준다.

ButtonCounter은 다음과 같다.

ButtonCounter.js

import { Component } from "react";

class ButtonCounter extends Component {
  render() {
    const { count, increment } = this.props;

    return <button onClick={increment}>Clicked {count} times!</button>;
  }
}

export default ButtonCounter;

이처럼 부모컴포넌트에서 props로 렌더할 내용을 동적으로 전달해주어 여러 컴포넌트가 state sharing을 할 수 있다.

📙 마무리

HOCs와 render props 두 가지 방법 다 정해진 API가 아닌 사용자가 만들어서 쓰는 패턴이다.

클래스형 컴포넌트에서 state를 전달할 컴포넌트가 많지 않다면 직접적으로 state를 props로 전달하여 사용하면 되지만 전달할 컴포넌트가 많다면 위 두가지 로직을 이용하여 효율적으로 state를 공유할 수 있도록 해야겠다.

하지만 함수형 컴포넌트는 이러한 점을 개선하기 위하여 HOOk이라는 API를 제시하였고 이를 사용하면 위와 같은 문제점들을 더 간편하게 해결할 수 있다.

참조 : stateful logic sharing