아 그거 뭐였지

로그인 기능을 구현하던도중 아이디와 패스워드를 받아야 하였고, 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) =>..

컴포넌트 재사용성을 위해 Styled-Component를 사용해보기로 하였다. 사용하기에앞서 설치를 먼저 해주도록하자. 본인은 타입스크립트로 개발하였기에 두번째 명령어로 설치하였다. //타입스크립트 안쓸경우 npm install styled-components //타입스크립트를 사용할경우 npm install @types/styled-components 사용하고자 하는 컴포넌트에서 import를 한다음 원하는 html element(div나 span등등,,,)를 지정하여 사용하면 된다. 문법은 styled.element`css속성` 이다. 코드로 확인해보자. //Button.tsx import styled from "styled-components"; // 타입정의 type ButtonType = { w..