인프런 커뮤니티 질문&답변

안녕하세요 선생님 혼자 해보는 과정중에 질문이 있습니다.

import React from "react";
import Backdrop from "../components/Backdrop";
import Dialog from "../components/Dialog";

export const layoutContext = React.createContext({});
layoutContext.displayName = "LayoutContext";

export class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dialog: null,
    };
    this.setDialog = this.setDialog.bind(this);
  }

  setDialog(dialog) {
    this.setState({ dialog });
  }

  render() {
    const value = {
      dialog: this.state.dialog,
      setDialog: this.setDialog,
    };
    return (
      <layoutContext.Provider value={value}>
        {this.props.children}
      </layoutContext.Provider>
    );
  }
}

export const DialogContainer = () => (
  <layoutContext.Consumer>
    {({ dialog }) => dialog && <Backdrop>{dialog}</Backdrop>}
  </layoutContext.Consumer>
);

export const withLayout = (WrappedComponent) => {
  const WithLayout = (props) => (
    <layoutContext.Consumer>
      {({ dialog, setDialog }) => {
        const openDialog = () => {
          console.log("openDialog")
          setDialog(<Dialog>hihi</Dialog>);
        };
        const closeDialog = () => {
          setDialog(null);
        };
        const enhancedProps = {
          openDialog,
          closeDialog,
        };

        return (
          <WrappedComponent {...props} {...enhancedProps}></WrappedComponent>
        );
      }}
    </layoutContext.Consumer>
  );
  return WithLayout;
};

withLayout을 만들어서 openDialog, closeDialog를 enhancedProps로 전달을 하였습니다.

import * as MyLayout from "../lib/MyLayout";

const Page = ({ header, children, footer, openDialog }) => (
  <div className="Page">
    <header>{header}</header>
    <main>{children}</main>
    <footer>{footer}</footer>
    <MyLayout.DialogContainer />
    <button onClick={openDialog}>dialog</button>
  </div>
);

export default MyLayout.withLayout(Page);

Page에서 MyLayout.DialogContainer이 기본값이 null인데 button을 추가하여 고차컴포넌트에서 주입받은 openDialog를 사용하여 Dialog를 렌더링하는데 성공하였습니다.

닫기도 해보고싶어서

import * as MyLayout from "../lib/MyLayout";

const Dialog = ({ closeDialog }) => (
  <div className="Dialog">
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
    <button onClick={closeDialog}>closeDialog</button>
  </div>
);

export default MyLayout.withLayout(Dialog);

Dialog component에 닫기 버튼을 추가하려고 MyLayout.withLayout으로 감싸니

초기화 전에 참조하려 했다는데 이 에러 자체는 이해가 가지만 왜 지금 위 상황이 이 에러에 해당되는 상황인지 이해가 가지 않습니다...