TypeScript 관련 공유

• TypeScript 핸드북
• Styled component props 넘기기 & 미디어쿼리
• enum vs. const assertion
• useRef 사용 시 발생하는 Typescript 에러
• 리액트 이벤트 핸들러 타입
  • JSX 인라인 이벤트 핸들러 (ex. onClick, onChange, ...) → 타입 선언하지 않아도 됨
  • 이름이 있는 핸들러 (ex. handleClick, handleSubmit, ...) → 핸들러를 추가하는 HTML 요소 이벤트 속성에 hover해서 타입 알아내서 선언
  • 여러 HTML 요소에서 사용할 수 있는 이벤트 핸들러 → 이름이 있는 핸들러 타입 선언 방법 + 유니온 타입 선언
• 컴포넌트 점 표기법 시 타입 지정

  // 상위컴포넌트.tsx
  import 하위컴포넌트 from "./하위컴포넌트";
  
  interface 상위컴포넌트Props {
    ...
  }
  
  typeof 상위컴포넌트구성Type = {
    하위컴포넌트이름 : typeof 하위컴포넌트;
  }
  
  const 상위컴포넌트: React.FC<상위컴포넌트Props> & 상위컴포넌트구성Type = ({...}) => { ... };
  
  상위컴포넌트.하위컴포넌트이름 = 하위컴포넌트;

  // 예시 
  // Tab.tsx
  import TabItem from "./TabItem";
  
  interface TabInterface {
    ...
  }
  
  type TabCompositionType = {
    Item: typeof TabItem;
  };
  
  const Tab: React.FC<TabInterface> & TabCompositionType = ({...}) => { ... };
  
  Tab.Item = TabItem;