유틸리티 타입 Pick<T, K> 프젝에 적용하기 | TypeScript

얼마 전에 한 입 크기로 잘라먹는 타입스크립트에서 유틸리티 타입을 공부했다. 마침 블로그 프로젝트을 하면서 유저정보등 중복되는 타입 사용이 많아 불편함을 겪고 있었다. 그래서 이번에 프로필 정보 수정 모달을 작업하면서 적용시켜 보았다. 간단하지만 이 타입을 모른다면 절대 사용할 수 없는 코드랄까.. 

 

우선, Pick 타입에 대해 간단히 설명하자면,  원래 만들어 놓은 객체 타입에서 몇 개의 key만 필요할 때 사용가능하다. 

즉, 필요한 key만 "Pick"하는 것이다. 

 

내 블로그 프로젝트를 예로 들어보자. 

a. (/profile/index.tsx) 에서 유저정보를 받아오고 그 타입은 아래와 같이 지정해두었다. 

const [userInfo, setUserInfo] = useState<UserInfoProps>([]);

const {
		name,
		imageUrl,
		followerCount,
		followingCount,
		photoScore,
		writingScore,
		languagesSubcribed,
		region,
	} = userInfo;

(...)

 

import { RegionResponse } from "lib/dto/region/region";

export interface UserInfoProps {
	id: string;
	name: string;
	imageUrl: string | null;
	followerCount: number;
	followingCount: number;
	photoScore: number;
	writingScore: number;
	region: RegionResponse;
	languagesSubcribed: {
		id: string;
		name: string;
	};
}

 

b. 이렇게 만들어 놓고 프로필 페이지 내부에서 한창 다른 작업을 했다.

 

c. 프로필 수정 모달이 필요하게 되었다. 위의 유저정보중, "이름, 이미지, 지역"만 변경가능한 api를 사용할 예정이다. 

폴더구조는 profile > editButton > EditModal 이다. 

(수정하는 버튼을 누르는 컴포넌트)

mport tw from "twin.macro";
import React, { useState } from "react";
import { EditModal } from "./EditModal";
import { UserInfoProps } from "types/user";

type Props = Pick<UserInfoProps, "name" | "region" | "imageUrl">;

const EditButton = ({ name, region, imageUrl }: Props) => {
	const [openModal, setOpenModal] = useState(false);

	return (
		<button tw="text-mint" onClick={() => setOpenModal(true)}>
			edit
			{openModal && (
				<EditModal
					setOpenModal={setOpenModal}
					name={name}
					region={region}
					imageUrl={imageUrl}
				/>
			)}
		</button>
	);
};

export default EditButton;

Pick 타입을 이용해서 필요한 "name", "region", "imageUrl"만 미리 짜뒀던 UserInfoProps에서 가져왔다.

 

 ++ 다른 props도 함께 타입을 지정해 줘야한다면?

type Props = {
	setOpenModal(item: boolean): void;
} & Pick<UserInfoProps, "name" | "region" | "imageUrl">;

export const EditModal = ({ name, region, imageUrl, setOpenModal }: Props) => {
(...)

&연산자를 사용하면 간단히 해결이다. 

이외에도 다른 유용한 유틸리티 타입이 많고 곧 리팩토링을 하면서 적용시켜볼 예정이다. 

[참고]

Record, Pick, Omit - 유틸리티 타입

 

 

역시 사람은 공부를 해야해....