공통된 레이아웃을 사용할 때

공통된 레이아웃을 사용할 때

공통된 레이아웃을 사용하기 위해서는 2가지 방법이 있다.

 

방법 1

-workspace

      <WorkspaceWrapper>
        <Workspaces>test</Workspaces>
        <Channels>
          <WorkspaceName>Sleact</WorkspaceName>
          <MenuScroll>MenuScroll</MenuScroll>
        </Channels>
        <Chats>Chats</Chats>
        {children}
      </WorkspaceWrapper>

이렇게 {children}을 레이아웃 부분에 넣는다.

 

-컴포넌트

const Channel = () => {
  return (
    <Workspace>
      {/* div 태그가 Workspace의 children이 된다. 즉 다른 컴포넌트 안에 넣은 jsx는 childre이 된다. */}
      <div>로그인하신 것을 축하드려요!</div>
    </Workspace>
  );
};

이렇게 각 컴포넌트에 가서 Workspace를 감싸면 div가 children 역할을 하게 된다.

 

방법2

공통 레이아웃인 Workspace 파일에 하면된다.

const Channel = loadable(() => import('@pages/Channel'));
const DirectMessage = loadable(() => import('@pages/DirectMessage'));

먼저 코드 스플리팅을 한다.

 

          <Switch>
            <Route path="/workspace/channel" component={Channel} />
            <Route path="/workspace/dm" component={DirectMessage} />
          </Switch>

그리고 Switch로 감싸서 Route로 해주면된다. 여기서 유의할 점은 Worksapce의 path가 /workspace로 시작하기 때문에 공통된 부분이 있어야 한다.