Slack 클론 코딩 03 [React, Typescript]

stopPropagation

const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => {
  const stopPropagation = useCallback((e) => {
    e.stopPropagation();
  }, []);
  return (
    <CreateMenu onClick={onCloseModal}>
      <div onClick={stopPropagation} style={style}>
        {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>}
        {children}
      </div>
    </CreateMenu>
  );
};

HTML에서는 이벤트 버블링으로 인해 자식을 클릭하면 부모까지 click event가 전달됩니다. stopPropagation을 사용해서 자식태그의 이벤트가 부모까지 전달되는 것을 막아줍니다.
부모 태그를 클릭했을 때는 모달창이 닫히게, 하지만 자식 태그를 클릭했을 때는 모달창이 닫히지 않는 방법입니다

Code-Splitting 코드 스플리팅

import loadable from '@loadable/component';

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

const App = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={LogIn} />
      <Route path="/signup" component={SignUp} />
      <Route path="/workspace/channel" component={Channel} />
      <Route path="/workspace/dm" component={DirectMessage} />
    </Switch>
  );
};

loadable() 으로 코드 스플리팅을 통해 현재 필요한 부분만 로드하여 성능을 향상시킬 수 있습니다.