React와 TypeScript를 함께 사용할 때의 베스트 프랙티스

React와 TypeScript를 함께 사용하면 안정적이고 확장성 있는 프론트엔드 애플리케이션 개발이 가능합니다. 하지만 올바른 방법을 모르면 생산성이 떨어지고 코드가 복잡해질 수 있습니다.

1. 컴포넌트 props에 인터페이스 활용하기

props에 명확한 타입을 선언해 코드 자동완성과 타입 검사를 적극 활용해야 합니다. 보통 interface나 type alias를 사용합니다.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => (
  <button onClick={onClick} disabled={disabled}>{label}</button>
);

2. React Hooks 타입 지정

useState와 useRef 훅 등은 제네릭 타입 인자를 지정해 상태와 참조값의 타입을 명확히 합니다.

const [count, setCount] = React.useState<number>(0);
const inputRef = React.useRef<HTMLInputElement | null>(null);

3. 이벤트 핸들러 타입 지정

이벤트 핸들러 함수 매개변수에 React의 내장 이벤트 타입을 지정해 에러를 줄입니다.

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

4. Context API 타입 선언

Context 객체 생성 시 기본값에 맞는 타입을 선언해야 사용자의 혼선을 막고 안전한 상태 관리를 돕습니다.

interface AuthContextType {
  user: string | null;
  login: (username: string) => void;
  logout: () => void;
}

const AuthContext = React.createContext<AuthContextType | undefined>(undefined);

5. Any 타입 지양 및 타입 단언 최소화

any 타입은 타입스크립트의 장점을 무력화하므로 최대한 사용하지 않고, 부득이할 때는 적절한 타입 가드나 단언(assertion)을 활용합니다.

React와 TypeScript를 함께 사용할 때 위와 같은 타입 선언 방식을 따르면 코드의 안정성, 가독성, 유지보수성이 크게 개선됩니다. 점진적으로 타입스크립트를 적용하면서 베스트 프랙티스를 자연스럽게 체득하시길 바랍니다.