꾸생의 DevLog

[React] Styled-Components useRef 타입스크립트 오류

Styled-Components Ref Styled-Components로 만든 컴포넌트에 ref를 사용하고 싶었으나 타입스크립트 에러 때문에 안되는 상황. 검색을 해보면 별도의 컴포넌트를 만들어 해당 컴포넌트를 기반한 스타일드 컴포넌트로 만들어 사용하고 forwardRef를 사용해 Ref를 전달 후 할당하는 방법 밖에 나오지 않았다. 분명 스타일드 컴포넌트에 ref를 바로 선언해 사용 할 수 있을거라 생각해 스택오버플로우를 다 뒤져봤다. 그랬더니 나와같은 상황을 겪은 분을 찾아 코드를 가져왔다. import React, { useRef, useEffect } from 'react'; import styled from 'styled-components'; const StyledInput = styled.i..

2023.01.14  

[React] 스타일드 컴포넌트(Styled-Components) HTML요소 동적으로 생성하기

사내 디자인 가이드에 따라 프론트엔드 개발자 분들이 사용할 컴포넌트들을 만들고 있습니다. MUI처럼 사용할 수 있도록 여러 컴포넌트를 설계하면서 코드를 작성하고 있는데요. Typography 컴포넌트 작업을 하다 HTML Element를 동적으로 변경하고 싶었는데 검색 키워드가 잘 못 됐는지 한국에서는 다루는 포스팅이 하나도 없길래 작성해 봤습니다. import styled from 'styled-components' const StyledComponent = styled.div` width: 100px; hegiht: 100px; border: 1px solid #000; ` const Component = () => { return } export default Component 위 코드는 스타일드 ..

2023.01.12