React 개발에서 TypeScript는 안전성과 가독성을 모두 제공하는 강력한 도구입니다. 이번 글에서는 TypeScript를 사용해 React 애플리케이션을 개발할 때 필요한 타입 정의와 활용 방법을 살펴보고, 실질적인 예제를 통해 이를 익혀보겠습니다. 💡
1. TypeScript란? 📝
TypeScript는 JavaScript의 상위 집합 언어로, 정적 타입을 제공합니다. 이를 통해 코드를 작성할 때 타입 오류를 미리 방지할 수 있어 유지보수가 훨씬 용이합니다.
장점:
- 코드 안정성 증가
- 자동 완성과 타입 추론으로 생산성 향상
- 큰 규모의 애플리케이션에서도 신뢰할 수 있는 코드 제공
단점:
- 학습 곡선이 있을 수 있음
- 초기 설정이 필요함
2. React에서 TypeScript 시작하기 🔧
React에서 TypeScript를 사용하려면 프로젝트를 설정해야 합니다.
설정 방법:
- 새 프로젝트 생성:
- npx create-react-app my-app --template typescript
- 기존 프로젝트에 추가:
- npm install --save typescript @types/react @types/react-dom
프로젝트가 설정되면 .tsx 확장자를 사용해 React 컴포넌트를 작성할 수 있습니다.
3. 기본 타입 정의 ✏️
TypeScript로 React 컴포넌트를 작성할 때 가장 기본적인 타입 정의는 Props를 사용하는 것입니다.
예제 코드: 기본 타입 정의
import React from 'react';
type GreetingProps = {
name: string;
age?: number;
};
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<p>Hello, {name}!</p>
{age && <p>Age: {age}</p>}
</div>
);
};
export default Greeting;
설명:
- name: 필수 문자열 프로퍼티.
- age: 선택적 숫자 프로퍼티(? 사용).
- React.FC: 함수형 컴포넌트를 위한 타입.
4. 상태와 이벤트 핸들러 타입 정의 🎛️
React 컴포넌트에서 상태 관리와 이벤트 핸들러에도 타입을 정의할 수 있습니다.
예제 코드: 상태와 이벤트 핸들러 타입 정의
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
};
export default Counter;
설명:
- useState<number>: 상태의 타입을 명시.
- React.MouseEvent<HTMLButtonElement>: 이벤트 핸들러의 타입.
5. 복잡한 데이터 구조의 타입 정의 📦
복잡한 데이터 구조를 다룰 때는 인터페이스나 타입 별칭을 사용합니다.
예제 코드: 데이터 구조 타입 정의
import React from 'react';
type Todo = {
id: number;
text: string;
completed: boolean;
};
type TodoListProps = {
todos: Todo[];
toggleTodo: (id: number) => void;
};
const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo }) => {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
/>
{todo.text}
</label>
</li>
))}
</ul>
);
};
export default TodoList;
설명:
- Todo: 각 할 일 항목의 타입.
- TodoListProps: todos 배열과 toggleTodo 함수의 타입.
6. Context와 TypeScript 활용하기 🗂️
TypeScript로 Context를 정의하고 활용하면 전역 상태 관리가 더욱 안전해집니다.
예제 코드: Context 정의
import React, { createContext, useContext, useState } from 'react';
type Theme = 'light' | 'dark';
type ThemeContextType = {
theme: Theme;
toggleTheme: () => void;
};
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
const ThemeProvider: React.FC = ({ children }) => {
const [theme, setTheme] = useState<Theme>('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
export default ThemeProvider;
설명:
- Theme: 가능한 테마 값.
- ThemeContextType: Context에서 제공하는 값의 타입.
- useTheme: Context를 쉽게 사용할 수 있도록 만든 커스텀 훅.
7. 마무리 🎉
TypeScript는 React와 결합할 때 강력한 도구로, 안전한 코드를 작성하고 생산성을 높이는 데 큰 도움을 줍니다. 이번 글에서 소개한 타입 정의와 예제를 참고하여 더 나은 React 애플리케이션을 만들어보세요! 💪
TypeScript와 함께하는 React 개발, 이제 두렵지 않죠? 지금 바로 프로젝트에 적용해보세요! 🚀
'프로그래밍 > React' 카테고리의 다른 글
[React] Next.js로 서버사이드 렌더링(SSR) 구현하기 – SEO 최적화와 성능 향상! 🌐 (2) | 2025.01.02 |
---|---|
[React] 성능 분석과 최적화 도구로 앱 속도 대폭 향상시키는 법 🕵️♀️ (0) | 2025.01.02 |
[React] Context API vs Redux – 어떤 상태 관리 방법이 더 나을까? 😳 (1) | 2024.12.31 |
[React] 성능 최적화 비법 공개! 리렌더링 줄이고 속도 개선하기 🧠 (0) | 2024.12.30 |
[React] 폼 처리와 유효성 검사 완벽하게 처리하는 방법 💻 (0) | 2024.12.30 |