React 컴포넌트 제네릭 전달

interface LinkButtonProp<S> {
  to: string;
  text: string;
  state: S;
}

function LinkButton<T>({text, ...props}: LinkButtonProp<T>) {
  return (
    <Link {...props}>
      <button type="button">{text}</button>
    </Link>
  )
}

// 사용
<LinkButton<{students: string[]}>
  text="시작"
  to="/students"
  state={["홍길동", "김철수", "이영희"]}
/>

• 공용 링크 컴포넌트에 라우터로 데이터를 전달할 때 타입을 제네릭으로 받고 싶었다

• 이게 될까 하면서 제네릭으로 만들어봤는데 컴포넌트도 제네릭으로 타입을 받을 수 있다는 것을 알게 되었다

• 라우터로 데이터를 전달하는 방식은 웹에서 좋지 않은 것 같다(새로 고침 시 고장나기 때문)

  • react-query나 SWR같은 서버 캐시 라이브러리를 사용하면 이런 문제를 방지할 수 있다