제네릭(Generic)

• 제네릭은 함수, 클래스, 인터페이스에서 타입을 사용할 때 타입을 미리 정하지 않고, 사용할 때 지정할 수 있도록 만드는 문법이다.
• 코드 재사용성과 타입 안정성을 높여준다.

function identity<T>(arg: T): T {
  return arg;
}

const num = identity<number>(42);
const str = identity<string>('hello');

• 제네릭은 배열, 객체, 함수 등 다양한 타입에서 쓸 수 있다.

function getArray<T>(items: T[]): T[] {
  return new Array().concat(items);
}

const numberArray = getArray<number>([1, 2, 3]);
const stringArray = getArray<string>(['a', 'b', 'c']);

• 타입 파라미터 이름으로는 보통 T를 사용하지만, 자유롭게 바꿀 수 있다.
• 제네릭 제약조건도 가능하다.

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

logLength('hello'); // 5
logLength([1, 2, 3]); // 3
// logLength(123); // 오류, 숫자는 length 속성 없음

Zustand

• Zustand는 React 상태관리를 위한 가볍고 직관적인 상태관리 라이브러리다.
• 리덕스 같은 복잡한 설정 없이 간단히 글로벌 상태를 관리할 수 있다.
• 기본 사용법

import create from 'zustand';

type BearState = {
  bears: number;
  increase: () => void;
};

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

function BearCounter() {
  const bears = useStore((state) => state.bears);
  const increase = useStore((state) => state.increase);

  return (
    <div>
      <h1>{bears} 곰</h1>
      <button onClick={increase}>곰 추가</button>
    </div>
  );
}

• 특징
  • 매우 가볍고 빠르다 (번들 크기가 작음)
  • API가 간단해서 배우기 쉽다
  • React 컴포넌트에서 바로 훅처럼 사용 가능
  • 선택적 미들웨어 지원 (예: persist, devtools 등)
  • 상태는 전역에서 공유 가능하며, 필요할 때만 구독 가능해 불필요한 렌더링 최소화