-
React + TypeScript 에서 props 전달하는 법 with styled-componentsReact/React+TypeScript 2023. 2. 21. 19:51
📌 TypeScript 타입스크립트 기반 React 에서 props 를 전달하려면 어떻게 해야할까?
// interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age : number } // 전달하려는 props 뒤에 interface 를 지정해준다. const SayHello = ({name, age} : personobj) =>{ return( <div>sayHello {name} you are {age}</div> ) } function App() { return <> <SayHello name={"woony"} age={25}/> </> }
📌 그렇다면 Styled-components 스타일 컴포넌트에 props 를 전달하려면 어떻게 해야할까?
interface BoxProps { bgcolor : string } // 태그 뒤에 <> 사이에 interface 를 지정해준다. const Box = styled.div<BoxProps>` display: flex; align-items: center; background-color: ${(props) => props.bgcolor}; width: 100px; height: 100px; `; ...(중략) return <> <Box bgcolor={"red"}>Box</Box> </>
'React > React+TypeScript' 카테고리의 다른 글
TypeScript 기반 React 시작하기 with Styled-Components (0) 2023.02.23 리액트 타입스크립트 스타일컴포넌트 Theme 적용하기 (0) 2023.02.22 React+TypeScript Form 형식을 공부해보자! (0) 2023.02.22 ? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null Check (0) 2023.02.21 타입스크립트로 리액트 시작하기 + 기본 문법 (2) 2023.02.18