[TIL] 0216

MonSub Refactoring - TS적용

react에 ts적용하기

Component

interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
  children: React.ReactNode;
  accept?: string;
}

const Upload = ({
  children,
  name,
  accept,
  value,
  onChange,
  disabled,
  ...props
}: UploadProps): ReactElement => {
  const inputRef = useRef<HTMLInputElement | null>(null);

• 컴포넌트 파라미터와 리턴값에 대한 타입 설정
• 훅 사용 시 Generic로 파라미터 타입 설정하기
• props에 대한 타입인 interface설정
  • 필수 값이 아닌 경우 옵셔널(?)을 설정해야함

  • InputHTMLAttributes<HTMLInputElement> 사용하면 해당 태그에 속한 속성들의 대한 타입은 지정해주지 않아도 알아서 설정된다
        ```

styled component

const StyledInput = styled.input<InputProps>`
  width: ${({ width }) => (typeof width === 'number' ? `${width}rem` : width)};
  height: ${({ height }) =>
    typeof height === 'number' ? `${height}rem` : height};
  padding: 0.5rem;
  font-size: 1rem;
  border: 0.063rem solid ${theme.color.greyMedium};
  border-radius: ${({ round }) => (round ? '0.2rem' : 'none')};
  ${({ focus }) =>
    focus
      ? `
    &:focus {
      border: 0.063rem solid ${theme.color.main};
    }
    `
      : null}
`;

• styled component에 props을 받아서 사용하려면 Generic로 type을 지정해줘야한다