TypeScript (3) 썸네일형 리스트형 🔗 API 통신 타입, 이렇게 정의하면 실무에서 편해진다 (React + TypeScript + Axios) 들어가면서 React + TypeScript에서 API를 다룰 때, 가장 흔히 생기는 문제는 다음과 같다:res.data가 어떤 구조인지 매번 console.log로 확인해야 함백엔드에서 응답 구조 바뀌면 알아채지 못함반복되는 response.data.foo.bar.baz에 타입 없음에러 처리할 때 구조가 다 달라 혼란이 문제는 "타입 안전한 API 응답 구조 정의" 로 상당 부분 해결할 수 있다.이번 포스팅에서는 Axios 기반 실무 코드에서 사용하는 API 타입 설계 패턴을 알아보고자 한다. ✅ 1. 기본적인 Axios 응답 타입 지정interface User { id: number; name: string; email: string;}axios.get('/api/user/1').then((.. 🧩 Props에 타입 주는 법 완전 정리 (React + TypeScript) 들어가면서 React 컴포넌트를 만들 때 가장 기본이자 중요한 부분은 Props를 제대로 타입 지정하는 것이다.이전 포스팅에 이어지는 내용으로,이번 포스팅에서는 실무에서도 자주 쓰이는 패턴을 중심으로, children, optional, default 값 처리까지 깔끔하게 정리해보겠다. ✅ 1. 기본적인 Props 타입 지정type ButtonProps = { label: string; onClick: () => void;};function Button({ label, onClick }: ButtonProps) { return {label};} type 또는 interface로 Props 정의 가능함수형 컴포넌트에 인자로 구조분해하여 사용 ✅ 2. Optional Props (선택적으로 받을 수 .. 🧠 useState에 타입 주는 가장 깔끔한 패턴 정리 (React + TypeScript) 들어가면서React에서 useState를 사용할 때, 타입을 어떻게 줘야 가장 안정적이고 깔끔할까?처음 TS를 쓰기 시작하면 헷갈리는 부분 중 하나인데, 이번 포스팅에서는 다양한 상황에 맞는 useState 타입 선언 패턴을 정리해보겠다. ✅ 1. 기본 타입 (number, string, boolean)const [count, setCount] = useState(0);const [name, setName] = useState('홍길동');const [isLoading, setIsLoading] = useState(false);useState에 초깃값만 넣으면 자동 추론되기도 하지만, 명시하는 게 더 안전할 때도 있음 (초깃값이 null일 때 등) ✅ 2. 유니언 타입 (string 또는 null)co.. 이전 1 다음