2. 타입스크립트로 안전한 컴포넌트 만들기

TypeScript의 가장 큰 장점 중 하나는 컴포넌트의 props에 타입을 지정하여 예측 가능한 코드를 작성할 수 있다는 점입니다. 이를 통해 개발 중에 실수를 방지하고, 다른 개발자와의 협업을 원활하게 할 수 있습니다.

Props 타입 정의하기

React 컴포넌트의 props 타입을 정의하는 방법은 type과 interface 두 가지가 있습니다. 일반적으로 간단한 타입은 type, 객체 구조가 명확하고 확장이 필요할 수 있는 경우는 interface를 사용합니다.

// type을 사용한 정의
type ButtonProps = {
  label: string;
  primary?: boolean; // optional prop
  onClick: () => void; // 함수 타입
};

// interface를 사용한 정의
interface CardProps {
  title: string;
  children: React.ReactNode; // React 컴포넌트나 JSX를 자식으로 받음
}

함수 컴포넌트에 타입 적용하기

정의된 타입을 함수 컴포넌트에 적용하는 것은 간단합니다. React.FC (FunctionComponent)를 사용하거나, props 매개변수에 직접 타입을 지정할 수 있습니다. React.FC는 children prop을 암시적으로 포함했지만, 최신 버전에서는 명시적으로 포함해야 하므로 직접 타입을 지정하는 방식이 더 선호됩니다.

import React from 'react';

interface UserProfileProps {
  username: string;
  email: string;
  isActive: boolean;
}

const UserProfile = ({ username, email, isActive }: UserProfileProps) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <h2>{username}</h2>
      <p>Email: {email}</p>
      <p>Status: <span style={{ color: isActive ? 'green' : 'red' }}>
        {isActive ? 'Active' : 'Inactive'}
      </span></p>
    </div>
  );
};

export default UserProfile;

위 예제에서 UserProfile 컴포넌트는 UserProfileProps 인터페이스에 정의된 username, email, isActive 세 가지 prop을 받도록 강제됩니다. 만약 필수 prop인 username을 전달하지 않거나, isActive에 boolean이 아닌 값을 전달하려고 하면 TypeScript 컴파일러가 즉시 오류를 발생시킵니다.

장점:

• 자동 완성: 코드 에디터에서 props.를 입력했을 때 사용 가능한 모든 prop 목록을 보여줍니다.
• 문서화: 컴포넌트가 어떤 데이터를 필요로 하는지 명확하게 알 수 있습니다.
• 리팩토링 용이성: prop의 이름이나 타입을 변경할 때, 해당 컴포넌트를 사용하는 모든 곳에서 오류가 발생하여 수정할 부분을 쉽게 찾을 수 있습니다.

타입스크립트를 통한 props 타입 정의는 선택이 아닌 필수입니다. 이를 통해 버그가 대폭 감소하고 코드의 신뢰성이 크게 향상됩니다.