Next 13 / React 18 컴포넌트 나누기 / 타입스크립트 keyof typeof 객체 타입 변환 typescript

Nextjs 13 의 Demo 파일을 둘러보다 컴포넌트를 꽤 멋지게 재활용하는 방법이 있어 소개한다. 과정에서 type 지정을 하는 방법을 새롭게 알게되어 함께 공유한다. typeof 연산자는 객체 데이터를 객체 타입으로 변환시켜주는 연산자이다. 사용예시를 보며 이해해보자 svg 아이콘을 재사용 가능하도록 각각 함수로 만들어보자 svgProps 에는 className 이 들어올 예정이다. 아이콘을 불러올 index.tsx 를 만들어 주고 함수를 import 해오자 먼저 각 함수들을 components 객체에 담아준다. 객체에 typeof 를 사용하면 하나하나 지정할 필요 없이 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입 으로 만들어 사용이 가능하다. 추가로 keyof 를 사용하면 객체 형태로 된 ..

2023.10.06