[React] Styled-Component onChange TypeScript , useState

로그인 기능을 구현하던도중 아이디와 패스워드를 받아야 하였고, input태그가 중복이 되어 재사용성을 위해

input 태그를 Styled-Component로 따로 빼서 작업을 하였다.

 

재사용성을 위해 분리한것까지는 좋았지만, 타입정의와 props를 처리하는데 있어 삽질을 했다.

onChange 이벤트로 입력값을 받아오려했지만 받아오지못하고 타입 오류가 났었다. 

onChange가 없으셈~

타입정의를 안해주어서 생긴 문제였는데 바로 코드로 확인해보자.

//Input Component
import React from "react";
import styled from "styled-components";

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

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}
    ></InputBox>
  );
};

export default Input;

다른 스타일 값도 받아야해서 자질구레한 타입정의들이 많지만 핵심은 밑에 코드에 있다.

type InputProps = {
  width: number;
  fontSize: number;
  //onChange 타입정의를 해줘야함
  onChange?: (e: any) => void;
};

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

Input으로 받을값의 타입들을 정의해주고

onChange 이벤트가 발생시 props를 전달해주면된다.

 

타입까지는 잘 정의했었는데 props전달을 해주지않아서 입력값을 받아오지못했었다.

다른 컴포넌트에서 재사용할때는 아래와같이 사용하였다.

import Input from "../../presentational/Input";

function Login(){
    const [userId, setUserId] = useState("");
    const [password, setPassword] = useState("");
      
    const inputUserId = (e: React.ChangeEvent<HTMLInputElement>) =>{
        const {value} = e.target;
        setUserId(value);
    }
      
    return (
    	//방법1
        <Input onChange={inputUserId} width={550} fontSize={15} />
        //방법2
        <Input onChange={(e)=>setUserId(e.target.value)} width={550} fontSize={15} />
    )
}

건방진 타입스크립트