[React] Spring Boot with React 채팅 서버 : 2. layouts

1.  layouts 트리 구조

├── App.tsx
└── messenger
    ├── index.tsx
    └── styles.tsx

Client.tsx

render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.querySelector('#app')
);

App.tsx

const App = () => {
    return (
		<Switch>
			<Redirect exact path="/" to="/login"/>
			<Route path="/login" component={LogIn}/>
			<Route path="/signup" component={SignUp}/>
			<Route path="/messenger" component={Messenger}/>
		</Switch>
    );
};

• Client.tsx에서 내부 로직으로 사용될 App.tsx이다
  • BrowserRouter가 감싸고 있으며 이를 통해 URL과 UI가 동기화되도록 하는 라우터이다

• Switch : Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줌
• Redirect : 요청 경로를 다른 경로로 리다이렉션함
• Route : 컴포넌트에 path 속성을 이용하여 원하는 url을 지정함

 

Messenger

const Messenger: VFC = () => {

    return (
        <>
            <Div>
                <Navigation/>
                <ChatMenu/>
                <Route exact path="/messenger/dm/:roomId"
                       component={ChatBox}/>
            </Div>
        </>
    )
}

• /messenger 기본창으로 들어갈 경우 해당 messenger layout을 띄워줍니다
• <Navigation>, <ChatMenu> 컴포넌트를 상단바와 왼쪽 사이드에 배치해주고 ChatMenu에 뿌려진 채팅방 목록중 하나를 클릭하게 될 경우 <ChatBox> 컴포넌트에 채팅 내역 및 메시지 전송 input을 제공해줍니다