Front-End
[React] Styled-Component onChange TypeScript , useState
승발자
2022. 7. 16. 21:07
728x90
반응형
로그인 기능을 구현하던도중 아이디와 패스워드를 받아야 하였고, input태그가 중복이 되어 재사용성을 위해
input 태그를 Styled-Component로 따로 빼서 작업을 하였다.
재사용성을 위해 분리한것까지는 좋았지만, 타입정의와 props를 처리하는데 있어 삽질을 했다.
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} />
)
}
728x90
반응형