React와 TypeScript: 확장 가능하고 유지보수하기 쉬운 애플리케이션을 위한 모범 사례

TypeScript와 React는 최신 웹 애플리케이션을 구축하기 위한 강력한 조합입니다. TypeScript는 JavaScript에 정적 타이핑을 도입하여 코드 품질과 유지보수성을 향상시키고, React는 사용자 인터페이스를 구축하기 위한 선언적이고 컴포넌트 기반의 접근 방식을 제공합니다. 이 블로그 게시물에서는 전 세계 사용자에게 적합한 견고하고 확장 가능하며 유지보수하기 쉬운 애플리케이션을 만들기 위해 React와 TypeScript를 사용하는 모범 사례를 탐구합니다.

React와 TypeScript를 함께 사용해야 하는 이유

모범 사례를 자세히 알아보기 전에, TypeScript가 React 개발에 왜 가치 있는 추가 요소인지 이해해 봅시다:

코드 품질 향상: TypeScript의 정적 타이핑은 개발 프로세스 초기에 오류를 잡아내어 런타임 문제를 줄이고 코드 안정성을 향상시킵니다.
유지보수성 강화: 타입 주석과 인터페이스는 코드를 이해하고 리팩토링하기 쉽게 만들어 장기적인 유지보수성을 향상시킵니다.
향상된 IDE 지원: TypeScript는 자동 완성, 코드 탐색 및 리팩토링 도구 등 뛰어난 IDE 지원을 제공하여 개발자 생산성을 높입니다.
버그 감소: 정적 타이핑은 런타임 이전에 많은 일반적인 JavaScript 오류를 잡아내어 더 안정적이고 버그 없는 애플리케이션을 만듭니다.
향상된 협업: 명확한 타입 정의는 개발자들이 다양한 컴포넌트와 함수의 목적 및 사용법을 빠르게 이해할 수 있도록 하여 팀이 대규모 프로젝트에서 협업하기 쉽게 만듭니다.

TypeScript React 프로젝트 설정

Create React App 사용하기

새로운 TypeScript React 프로젝트를 시작하는 가장 쉬운 방법은 TypeScript 템플릿과 함께 Create React App을 사용하는 것입니다:

npx create-react-app my-typescript-react-app --template typescript

이 명령은 필요한 의존성과 tsconfig.json 파일을 포함하여 TypeScript가 구성된 기본적인 React 프로젝트를 설정합니다.

`tsconfig.json` 구성하기

tsconfig.json 파일은 TypeScript 구성의 핵심입니다. 다음은 몇 가지 권장 설정입니다:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

고려해야 할 주요 옵션:

"strict": true: 엄격한 타입 검사를 활성화하며, 잠재적인 오류를 포착하는 데 적극 권장됩니다.
"esModuleInterop": true: CommonJS와 ES 모듈 간의 상호 운용성을 활성화합니다.
"jsx": "react-jsx": 새로운 JSX 변환을 활성화하여 React 코드를 단순화하고 성능을 향상시킵니다.

TypeScript를 사용한 React 컴포넌트 모범 사례

컴포넌트 Props 타이핑하기

React와 TypeScript를 사용하는 가장 중요한 측면 중 하나는 컴포넌트 props를 올바르게 타이핑하는 것입니다. 인터페이스 또는 타입 별칭을 사용하여 props 객체의 형태를 정의하세요.

interface MyComponentProps {
  name: string;
  age?: number; // 선택적 prop
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    
      Hello, {name}!
      {age && You are {age} years old.}
      
    
  );
};

React.FC<MyComponentProps>를 사용하면 컴포넌트가 함수형 컴포넌트이고 props가 올바르게 타이핑되었음을 보장합니다.

컴포넌트 State 타이핑하기

클래스 컴포넌트를 사용하는 경우, 컴포넌트의 상태도 타이핑해야 합니다. 상태 객체에 대한 인터페이스 또는 타입 별칭을 정의하고 컴포넌트 정의에서 사용하세요.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      
        Count: {this.state.count}
        
      
    );
  }
}

useState 훅을 사용하는 함수형 컴포넌트의 경우, TypeScript는 종종 상태 변수의 타입을 추론할 수 있지만, 명시적으로 제공할 수도 있습니다:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    
      Count: {count}
      
    
  );
};

타입 가드 사용하기

타입 가드는 특정 스코프 내에서 변수의 타입을 좁히는 함수입니다. 공용체 타입을 다루거나 연산을 수행하기 전에 변수가 특정 타입을 가졌는지 확인해야 할 때 유용합니다.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  n}
}

isCircle 함수는 Shape이 Circle인지 확인하는 타입 가드입니다. if 블록 내에서 TypeScript는 shape이 Circle임을 알고 radius 속성에 접근할 수 있도록 합니다.

이벤트 처리하기

React에서 TypeScript로 이벤트를 처리할 때, 이벤트 객체를 올바르게 타이핑하는 것이 중요합니다. React 네임스페이스에서 적절한 이벤트 타입을 사용하세요.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

이 예제에서, React.ChangeEvent<HTMLInputElement>는 input 요소의 변경 이벤트에 대한 이벤트 객체를 타이핑하는 데 사용됩니다. 이는 HTMLInputElement인 target 속성에 접근할 수 있도록 합니다.

프로젝트 구조

잘 구조화된 프로젝트는 유지보수성과 확장성에 매우 중요합니다. 다음은 TypeScript React 애플리케이션을 위한 제안된 프로젝트 구조입니다:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

주요 내용:

Components: 관련 컴포넌트를 디렉토리로 그룹화합니다. 각 디렉토리에는 컴포넌트의 TypeScript 파일, CSS 모듈(사용하는 경우), 그리고 컴포넌트를 내보내기 위한 index.ts 파일이 포함되어야 합니다.
Pages: 애플리케이션의 다른 페이지를 나타내는 최상위 컴포넌트를 저장합니다.
Services: 이 디렉토리에서 API 호출 및 기타 서비스를 구현합니다.
Types: 이 디렉토리에서 전역 타입 정의 및 인터페이스를 정의합니다.
Utils: 헬퍼 함수 및 상수를 저장합니다.
index.ts: index.ts 파일을 사용하여 디렉토리에서 모듈을 다시 내보내고, 모듈 임포트를 위한 깔끔하고 체계적인 API를 제공합니다.

TypeScript와 함께 Hooks 사용하기

React Hooks를 사용하면 함수형 컴포넌트에서 상태 및 기타 React 기능을 사용할 수 있습니다. TypeScript는 Hooks와 완벽하게 작동하여 타입 안전성과 향상된 개발자 경험을 제공합니다.

`useState`

앞서 보았듯이, useState를 사용할 때 상태 변수를 명시적으로 타이핑할 수 있습니다:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    
      Count: {count}
      
    
  );
};

`useEffect`

useEffect를 사용할 때는 의존성 배열에 유의하세요. 효과 내에서 사용되는 의존성을 포함하는 것을 잊으면 TypeScript가 오류를 잡아내는 데 도움을 줄 수 있습니다.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // 'count'를 의존성 배열에 추가

  return (
    
      Count: {count}
      
    
  );
};

의존성 배열에서 count를 생략하면 컴포넌트가 마운트될 때 한 번만 효과가 실행되고, count가 변경될 때 문서 제목이 업데이트되지 않습니다. TypeScript는 이 잠재적인 문제에 대해 경고합니다.

`useContext`

useContext를 사용할 때, 컨텍스트 값에 대한 타입을 제공해야 합니다.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // 테마 로직을 여기에 구현하세요
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    
      Theme: {theme}
      
    
  );
};

export { ThemeProvider, MyComponent };

컨텍스트 값에 대한 타입을 제공함으로써, useContext 훅이 올바른 타입의 값을 반환하도록 보장합니다.

TypeScript React 컴포넌트 테스트하기

테스팅은 견고한 애플리케이션을 구축하는 데 필수적인 부분입니다. TypeScript는 타입 안전성과 향상된 코드 커버리지를 제공하여 테스팅을 강화합니다.

유닛 테스팅

Jest 및 React Testing Library와 같은 테스팅 프레임워크를 사용하여 컴포넌트를 유닛 테스트하세요.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScript의 타입 검사는 잘못된 props를 전달하거나 잘못된 이벤트 핸들러를 사용하는 것과 같은 테스트의 오류를 잡아내는 데 도움이 됩니다.

통합 테스팅

통합 테스트는 애플리케이션의 여러 부분이 올바르게 함께 작동하는지 확인합니다. Cypress 또는 Playwright와 같은 도구를 사용하여 엔드투엔드 테스트를 수행하세요.

성능 최적화

TypeScript는 개발 프로세스 초기에 잠재적인 성능 병목 현상을 포착하여 성능 최적화에도 도움을 줄 수 있습니다.

메모이제이션

React.memo를 사용하여 함수형 컴포넌트를 메모이제이션하고 불필요한 재렌더링을 방지하세요.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Rendering MyComponent');
  return (
    Hello, {name}!
  );
};

export default React.memo(MyComponent);

React.memo는 props가 변경된 경우에만 컴포넌트를 다시 렌더링합니다. 이는 특히 복잡한 컴포넌트의 경우 성능을 크게 향상시킬 수 있습니다.

코드 분할

동적 임포트를 사용하여 코드를 더 작은 덩어리로 분할하고 필요할 때 로드하세요. 이는 애플리케이션의 초기 로드 시간을 줄일 수 있습니다.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Loading...

React.lazy를 사용하면 컴포넌트를 동적으로 임포트할 수 있으며, 이 컴포넌트는 필요할 때만 로드됩니다. Suspense 컴포넌트는 컴포넌트가 로드되는 동안 폴백 UI를 제공합니다.

결론

React와 함께 TypeScript를 사용하면 웹 애플리케이션의 품질, 유지보수성 및 확장성을 크게 향상시킬 수 있습니다. 이러한 모범 사례를 따르면 TypeScript의 강력한 기능을 활용하여 전 세계 사용자의 요구를 충족하는 견고하고 성능 좋은 애플리케이션을 구축할 수 있습니다. 프로젝트의 장기적인 성공을 보장하기 위해 명확한 타입 정의, 잘 구조화된 프로젝트 구성 및 철저한 테스트에 집중하는 것을 잊지 마세요.

MLOG

React와 TypeScript: 확장 가능하고 유지보수하기 쉬운 애플리케이션을 위한 모범 사례

React와 TypeScript를 함께 사용해야 하는 이유

TypeScript React 프로젝트 설정

Create React App 사용하기

`tsconfig.json` 구성하기

TypeScript를 사용한 React 컴포넌트 모범 사례

컴포넌트 Props 타이핑하기

컴포넌트 State 타이핑하기

타입 가드 사용하기

이벤트 처리하기

프로젝트 구조

TypeScript와 함께 Hooks 사용하기

`useState`

`useEffect`

`useContext`

TypeScript React 컴포넌트 테스트하기

유닛 테스팅

통합 테스팅

성능 최적화

메모이제이션

코드 분할

결론

추가 자료

React와 TypeScript: 확장 가능하고 유지보수하기 쉬운 애플리케이션을 위한 모범 사례

React와 TypeScript를 함께 사용해야 하는 이유

TypeScript React 프로젝트 설정

Create React App 사용하기

tsconfig.json 구성하기

TypeScript를 사용한 React 컴포넌트 모범 사례

컴포넌트 Props 타이핑하기

컴포넌트 State 타이핑하기

타입 가드 사용하기

이벤트 처리하기

프로젝트 구조

TypeScript와 함께 Hooks 사용하기

useState

useEffect

useContext

TypeScript React 컴포넌트 테스트하기

유닛 테스팅

통합 테스팅

성능 최적화

메모이제이션

코드 분할

결론

추가 자료

`tsconfig.json` 구성하기

`useState`

`useEffect`

`useContext`