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

Nextjs 13 의 Demo 파일을 둘러보다 컴포넌트를 꽤 멋지게 재활용하는 방법이 있어 소개한다.

과정에서 type 지정을 하는 방법을 새롭게 알게되어 함께 공유한다.

 

typeof 연산자는 객체 데이터를 객체 타입으로 변환시켜주는 연산자이다.

 

사용예시를 보며 이해해보자

svg 아이콘을 함수로 만들어 주었다

svg 아이콘을 재사용 가능하도록 각각 함수로 만들어보자

svgProps 에는 className 이 들어올 예정이다.

svg 아이콘을 import 해오자

아이콘을 불러올 index.tsx 를 만들어 주고 함수를 import 해오자

먼저 각 함수들을 components 객체에 담아준다.

 

객체에 typeof 를 사용하면 하나하나 지정할 필요 없이 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입 으로 만들어 사용이 가능하다.

 

추가로 keyof 를 사용하면 객체 형태로 된 타입을 속성들만 뽑아 모아서 유니온 타입으로 만들어준다.

type SocialIconProps = {
  kind: keyof typeof components // <- 이부분을 풀어서 보면
  href: string | undefined
  size?: number
}

type SocialIconProps = {
  kind: 'mail' | 'github' | 'facebook' ...  | 'twitter' // <- 이렇게 된다
  href: string | undefined
  size?: number
}

 

(클래스 같은 경우 클래스 자체가 객체 타입이 될수 있으므로 typeof를 안붙여도 된다.)

 

★ - JavaScript 객체 키는 항상 문자열을 강제한다

 

components 객체에 담은 함수를 사용하는중

SociaIcon 컴포넌트를 호출하는 부분에서 kind 에 문자열로 props 를 보내 각 아이콘 컴포넌트를 호출할 예정이다.

객체의 key 값이 띄어쓰기, 문자열, 숫자 등이 있으면 오류가 발생하기 때문에

//오류 발생
console.log(components.!키);
console.log(components.'!키');
console.log(components.33);
console.log(components.my name);

대괄호 문법으로 각 아이콘 컴포넌트들을 SocialSvg 객체에 담자

//정상 실행
console.log(components['!키']);
console.log(components['33']);
console.log(components['my name']);

이제 호출하고싶은 컴포넌트에서 소셜아이콘 컴포넌트를 불러보자 눈여겨 볼 부분은 kind 프롭스

문자열로 각 아이콘들의 이름을 kind 프롭스에 넣어주면

1 번 에서 kind 에 각 문자열 값을 받고

2 번 에서 3번의 components 객체를 문자열로 호출한다. ( 위에서 봤듯이 ./icons 에서 import 해온것들은 모두 svg 아이콘 컴포넌트다 )

마지막으로 4 번 에서 className 을 props 로 던져주면

이곳에서 받아서 출력하게 된다.

 

복잡하지만 막 좀 간지나고 되게 시니어같고 막 확장성도 좋고 멋지다