[TIL] 20230728 - react typescript 에서 styled-components 사용하기. 타입스크립트 타입 정의 @types/styled-components

 

react typescript로 todo app 만드는중...

type 값이 들어갈 수 없다고 계속 오류가 난다.

아무리 오류메세지를 찾아봐도 안뜨고... 무슨 오류지 .. 다 넣어줬는데 왜그러징?ㅠㅠ

했는데..........

알고보니 styledcomponents에 내가 태그를 잘못씀....

const StInput = styled.div`
    padding: 15px 25px;
    border: none;
    border: solid 1px #ddd;
`;

찾으신분??????

정말 어처구니....input 태그인데... div 태그로씀

정신똑디 차리자... 날아간 내시간 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

 

 

그리고 yarn add styled-components로 패키지를 설치했음에도

자동 import가 안되는것

styled-components 설치

yarn add styled-components

npm i styled-components

타입스크립트 - 타입정의 받기

npm i -D @types/styled-components

 

까지 진행해줘야한다!

 

 

yarn add styled-components @types/styled-components

이렇게 또는

yarn add styled-components && npm i -D @types/styled-components

이렇게

이렇게 두가지 모두 진행해줘야한다.

 

https://styled-components.com/

styled-components

 

타입스크립트에서 스타일 컴포넌트 사용하기 

 

https://velog.io/@altjsvnf/TS-TypeScript%EC%97%90%EC%84%9C-Styled-component-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[TS] TypeScript에서 Styled-component 사용하기

 

재사용 가능한 input 태그로 바꿔볼 예정이다.

그떄 참고할 키워드

 

forwardRef

https://www.daleseo.com/react-forward-ref/