2021-07-04 :: 메뉴와 모달 만들기1

워크스페이스 만들기(gravatar)

node에서는 app.tsx와 app폴더 안의 index.tsx를 거의 동일하게 처리한다.

 

gravatar에서 랜덤으로 아바타를 만들어준다. github 이미지 프로필의 다양함과 같음. 

 

types용 패키지를 설치할 때, @types/packageName이런 식으로 할지 아니면 그냥 패키지만 다운받으면 되는가에 대해

npm 공식 홈페이지에 페키지 이름 옆에 DT라는 마크가 있으면 따로 설치를 해주어야 하고, TS라고 되어 있으면 설치해줄 필요 없다.

가끔 types를 지원 안하면 직접 typing 작업을 해주어야 한다. 이러한 작업은 typing이라는 폴더에 따로 작업해서 넣어둬야 한다.

 

워크스페이스 만들기(중첩 라우터)

페이지 간 공통인 부분이 layout이고 바뀌는 부분이 page이다. Workspace - layout, Pages - channel, dm

1. 각 페이지에서 워크 스페이스를 띄우고, 워크스페이스 컴포넌트에서 children으로 페이지를 받아 렌더링하는 방법

2. 워크 스페이스 안에서 switch로 중첩라우터를 통해 각 페이지를 보여준다.

 

메뉴 드래그 만들기

메뉴 컴포넌트는 하드코딩 한다. component폴더에 있음

메뉴 트리거 버튼은 기본적으로 토글버튼이다. 보통 open 여부를 결정하는 state를 따로 두고. onClick 함수에 해당 state를 토글한다. 그리고 렌더링은 {isOpne && <Menu/>} 이런식으로 처리한다. 

 

하나의 컴포넌트는 하나의 역할만 한다. 단일 책임 규칙

 

ts를 사용할 때 컴포넌트의 props 역시 타이핑을 해주어야 한다. 그 때 사용하는 것이 interface Props {}이다.  react의 propTypes와 동일하다. 

 

메뉴 구현할 때 메뉴 밖을 눌렀을 때 메뉴가 닫기는 기능구현 => 내가 아닌 부모 컴포넌트를 클릭했을 때 닫게 하면 된다. 따라서 부모 영역에 onClick->닫기와 같이 설정 해 두면 된다. 

원래 나를 눌러도 부모의 onClick 이벤트가 같이 진행이 된다. 하지만 e.stopPropagation()함수를 이용하면 버블링을 막을 수 있다.

import { CreateMenu, CloseModalButton } from '@components/Menu/styles';
import React, { CSSProperties, FC, PropsWithChildren, useCallback } from 'react';

interface Props {
  show: boolean;
  onCloseModal: () => void;
  style: CSSProperties;
  closeButton?: boolean;
}

const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => {
  const stopPropagation = useCallback((e) => {
    e.stopPropagation();
  }, []);

  if (!show) {
    return null;
  }
  return (
    <CreateMenu onClick={onCloseModal}>
      <div onClick={stopPropagation} style={style}>
        {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>}
        {children}
      </div>
    </CreateMenu>
  );
};
Menu.defaultProps = {
  closeButton: true,
};

export default Menu;