[React] styled-component input type 변경 - TypeScript

 

styled-component로 정의해둔 input태그의 type을 password로 바꾸려하자 오류가났다.

type은 정의되어있지않았다.

원인은 styled-component를 정의할때 props의 타입에 input태그의 type을 적지 않았기 때문이다.

해당 PasswordInput컴포넌트는 Input컴포넌트를 styled-component로 만들어서 사용중이였다.

import Input from "../../presentational/Input";
import styled from "styled-components";

const PasswordInput = styled(Input)``;

 

Input컴포넌트를 정의한 곳에 가보면 InputProps 타입에 type이 없어서 추가해주었다.

type InputProps = {
  width: number;
  fontSize: number;
  onChange?: (e: any) => void;
  type?: string;
};

const InputBox = styled.input<InputProps>`
  width: ${(props) => props.width + "px"};
  font-size: ${(props) => props.fontSize + "px"};
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
`;

const Input = (props: InputProps) => {
  return (
    <InputBox
      onChange={props.onChange}
      fontSize={props.fontSize}
      width={props.width}
      type={props.type}
    ></InputBox>
  );
};

이렇게 작성하면 styled-component에서도 type을 props로 받을수있다.

 

생각해보면 당연한것이였는데 (props를 타입으로 정의해둔것 외에 다른 타입을 입력해서 오류)

타입스크립트에 익숙하지 않다보니 생긴 실수같다. 역시 기본기가 중요하다.