TIL #51 | Typescript - State와 Props 타입 지정하기

State & Props

useState

• useState()의 타입을 지정해준다. (값을 괄호안에 넣으면 자동으로 타입이 지정된다.)

const [counter, setCounter] = useState<number>(1)

Passing Props

• props를 받는 컴포넌트에서 props의 타입을 지정해준다.
• setState를 넘겨 받을 경우 타입은 React.Dispatch<React.SetStateAction<값 타입>> 으로 지정해준다.

function Parent() {
	const [count, setCount] = useState<string>("")
	return <Child count={count} />
}

// 타입 선언
type Props = {
	count: string
}

function Child({count}: Props) {
	return <div>{count}</div>
}

export default Parent

type Todo = {
	id: string;
	isDone: boolean;
}

function App() {
	const [todos, setTodos] = useState<Todo[]>([]);
	return (
		<>
		{todos.map(({id}) => (
			<Todo key={id} id={id} setTodos={setTodos} />
		))}
		</>
	)
}

// id와 setTodos를 받을 경우
function Todo({id, setTodos}: {id: string; setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;}) {
	const deleteTodo = () => {
		setTodos((prev) => prev.filter((todo) => todo.id !== id))
	}
	return <div onClick={deleteTodo}></div>
}

// id, todos, setTodos를 받을 경우
function Todo({id, todos, setTodos} : {id: string; todos: Todo[]; setTodos: (todoList: Todo[]) => void})

• deleteTodo와 같은 함수를 받을 경우 (매개변수) => 반환값으로 타입을 정의한다.

// id, deleteTodo를 받을 경우
function Todo({id, deleteTodo}: {id: string; deleteTodo: (id: string) => void})

Children Props

• children Props의 타입은 PropsWithChildren<BaseType>로 정의해준다.

import { PropsWithChildren } from "react";

type: BaseType = {
	id: string;
};

function Child({children}: PropsWithChildren<BaseType>) {
	return <div>{children}</div>
}

export function Parent() {
	return <Child id="" />;
}

• ReactNode: 컴포넌트의 리턴 타입
• 제네릭을 사용해서 타입을 지정해줄 수도 있다.

import { ReactNode } from "react";

type BaseType = {
  id: string;
};

type StrictChildren<T> = T & {children: ReactNode};

function Child({children}: StrictChildren<BaseType>) {
	return <div>{children}</div>
}

export function Parent() {
	return <Child id="" />;
}

Generic, Utility Type을 통해 Props용 Type 만들기

import {
	AddressComponent,
	PersonChildComponent.
	ProfileComponent,
} from './UtilityTypeChildren'

export type PersonProps = {
	id: string;
	description: string;
	address: string;
	age: number;
	profile: string
}

export const PersonComponent = ({
	id,
	description,
	address,
	age,
	profile
}: PersonProps) => {
	return (
    <>
      <PersonChildComponent>
        <div>{id}</div>
      </PersonChildComponent>
      <ProfileComponent
        description={description}
        address={address}
        age={age}
        profile={profile}
      />
      <AddressComponent address={address} />
    </>
}

import { PropsWithChildren, ReactNode } from "react";
import { PersonProps } from "./UtilityType";

export const PersonChildComponent = ({ children }: PropsWithChildren) => {
  return <>{children}</>;
};

type OmitType = Omit<PersonProps, "id">;

export const ProfileComponent = ({
  description,
  address,
  age,
  profile,
}: OmitType) => {
  return <></>;
};

type PickType = Pick<PersonProps, "address">;

export const AddressComponent = ({ address }: PickType) => {
  return <></>;
};