1. 문제 상황 React에서 기존 태그를 감싼 Custom Component를 만들때, 기존 태그의 속성을 override하고 싶은 경우가 있다. 그때 styled-components 를 이용하는 경우 어떻게 타입 선언을 해야할까? 2. 방법 적당한 예시와 함께 보자. input 태그의 size 속성은 input의 width를 결정한다. 우리가 만들 Custom Component인 Input은 size 속성에 따라 다른 padding 을 설정하는 것으로 바꾸고 싶다. 거두절미하고 결과코드부터 보자. 결과코드 // Input import { ComponentPropsWithoutRef } from "react"; import styled, { css } from "styled-components"; ex..
React
프로젝트의 컴포넌트를 만들 때 기존 태그의 props를 그대로 상속받아서 사용할 수 있게 만들어야 할 때가 있다. 리액트에서 제공하는 엘리먼트의 속성 타입들은 여러가지가 있다. HTMLAttributes [Element]HTMLAttributes ComponentPropsWithRef ComponentPropsWithoutRef HTMLAttributes HTMLAttributes 는 key, ref 같은 props 타입이 정의되어있지 않기 때문에, 사용에 적합하지 않다. [Element]HTMLAttributes type MyButtonProps = { backgroundColor?: string; } & ButtonHTMLAttributes; const MyButton = (props: MyButto..
render() 내부에 setState를 호출하면 해당 에러가 뜬다. render() 내부에 setState()를 직접 호출했는지 확인하거나, button 태그에서 // class형 컴포넌트인 경우 // 💩 // 😁 this.funcHasSetState()}> // 😁 funcHasSetStateAndParameter(arg1)}> // 😁 💩 와 같이 쓰지 않았는지 확인해보자. 참고로 2번째와 같이 사용하려면 함수에 this 바인딩이 되어있어야 한다.
