joamashi

Redux + typescript : 카운터 증가/감소를 구현

Redux의 핵심 개념을 Typescript와 함께 사용하는 기본 예제를 만들어 볼게요. 이 예제는 카운터 증가/감소를 구현합니다.🧠 기본 구성 개요redux: 상태 관리 라이브러리@reduxjs/toolkit: Redux를 더 편리하게 쓰도록 도와주는 툴킷react-redux: React와 Redux 연결typescript: 정적 타입 시스템📁 폴더 구조 예시src/├── app/│ └── store.ts // Redux store 설정├── features/│ └── counter/│ ├── counterSlice.ts // 상태 + 리듀서 정의│ └── Counter.tsx // 컴포넌트├── App.tsx└── main.tsx (or in..

React에서 타입스크립트 사용

✅ 1. Props와 State 타입 지정 (10가지)// 1. 기본 Propsinterface HelloProps { name: string; age: number;}const Hello = ({ name, age }: HelloProps) => {name} is {age};// 2. Optional Propsinterface OptionalProps { nickname?: string;}const Optional = ({ nickname }: OptionalProps) => {nickname ?? 'None'};// 3. Props + State 함께interface CounterProps { initialCount: number;}const Counter = ({ initialCount }:..

[타입스크립트] 배우기 목록

타입스크립트를 처음 배우려는 분들을 위한 체계적인 학습 목록을 아래와 같이 정리해 드릴게요. 기초 개념부터 실전까지 순차적으로 익힐 수 있도록 구성했어요.📘 타입스크립트 배우기 목록1. 기초 문법 이해타입스크립트란? 왜 쓰는가?타입스크립트 설치 및 설정 (tsc, tsconfig.json)기본 타입들 (string, number, boolean, null, undefined, any, unknown 등)타입 추론과 명시적 타입 지정2. 함수와 객체 다루기함수의 매개변수와 반환값 타입 지정선택적 매개변수와 기본값객체 타입 정의 (type, interface)구조 분해 할당과 타입 지정3. 고급 타입 사용유니온 타입 / 인터섹션 타입 (|, &)타입 가드 (typeof, in, instanceof)리터럴 ..

[타입스크립트] 기초: 변수와 함수의 타입 정의

✅ 3.1 변수에 타입을 정의하는 방법자바스크립트에서는 이렇게 변수 만들죠:let name = '철수'; // 타입 없음 (자동으로 string으로 추론됨)타입스크립트에서는 이렇게 명시적으로 타입을 적어줍니다:let name: string = '철수'; // name은 문자열(string)만 저장할 수 있음let age: number = 25; // 숫자 타입let isStudent: boolean = true; // true 또는 false만 가능💡 왜 타입을 적을까?나중에 실수로 숫자에 문자열을 넣거나, 잘못된 계산을 방지하기 위해서!age = '스물다섯'; // ❌ 오류! 숫자 타입에 문자열을 넣을 수 없음✅ 3.2 기본 타입들 (꼭 외워야 함)① string – 문자열let greet..

React + TypeScript에서 이벤트(Event)

onClick – 클릭 이벤트타입: React.MouseEvent 또는 React.MouseEvent// 1. 버튼 클릭const handleClick = (e: React.MouseEvent) => { console.log('Button clicked!', e.currentTarget);};// 2. div 클릭const handleDivClick = (e: React.MouseEvent) => { alert('Div clicked!');};// 3. 이미지 클릭const handleImgClick = (e: React.MouseEvent) => { console.log('Image src:', e.currentTarget.src);};// 4. 리스트 항목 클릭const handleListCli..

리액트 + 타입스크립트 기초 10단계 : 폼 성능 최적화 – Controller, 컴포넌트 분리, useMemo

1. 왜 최적화가 필요할까?여러 입력 필드가 있을 때, 한 필드가 변경될 때마다 모든 컴포넌트가 불필요하게 리렌더링 되면 성능이 떨어짐특히 useFormContext 사용 시, 상태 공유 범위가 넓어져 리렌더링 범위도 커짐2. Controller로 커스텀 컴포넌트 제어react-hook-form의 register는 HTML 요소에만 직접 사용 가능 →커스텀 UI 라이브러리 (예: MUI, Chakra 등)와 쓰려면 Controller 필요!import { useForm, Controller } from 'react-hook-form';type FormValues = { age: number;};function SliderForm() { const { control, handleSubmit } = us..

리액트 + 타입스크립트 기초 9단계 : 실제 사용자 경험을 위한 폼 통합 시나리오

핵심 주제:모달 안의 폼 처리제출 후 초기화API 연동 통합 처리제출 성공/실패 메시지 관리1. 모달 안에서 폼 처리하기 (with React Hook Form)import { useForm } from 'react-hook-form';interface ModalFormProps { onClose: () => void;}type FormValues = { email: string;};function ModalForm({ onClose }: ModalFormProps) { const { register, handleSubmit, reset, formState: { isSubmitSuccessful }, } = useForm(); const onSubmit = (data: Fo..

리액트 + 타입스크립트 기초 8단계 : useFieldArray, 조건부 필드, 동적 입력 처리

1. useFieldArray로 동적 입력 필드 만들기npm install react-hook-formimport { useForm, useFieldArray } from 'react-hook-form';type Friend = { name: string;};type FormValues = { friends: Friend[];};function FriendsForm() { const { register, control, handleSubmit } = useForm({ defaultValues: { friends: [{ name: '' }], }, }); const { fields, append, remove } = useFieldArray({ control, nam..

리액트 + 타입스크립트 기초 7단계 : React Hook Form + Zod 연동으로 타입 세이프한 폼 만들기

1. React Hook Form + TypeScript 기본 세팅npm install react-hook-form// SignUpForm.tsximport { useForm } from 'react-hook-form';type FormValues = { name: string; email: string;};function SignUpForm() { const { register, handleSubmit, formState: { errors }, } = useForm(); const onSubmit = (data: FormValues) => { console.log('전송된 데이터:', data); }; return ( {errors.name ..

리액트 + 타입스크립트 기초 6단계 : useRef, forwardRef, 커스텀 폼 유효성 검사

1. useRef 기본 사용법import { useRef } from 'react';function FocusInput() { const inputRef = useRef(null); const focusInput = () => { inputRef.current?.focus(); // null 체크 필요 }; return ( 포커스 주기 );}✅ useRef(null)처럼 초기값을 null로 주고 타입 명시✅ .current?.focus() → 옵셔널 체이닝으로 안전하게 접근2. forwardRef로 컴포넌트에 ref 전달import React, { forwardRef } from 'react';interface InputProps { label: stri..

1. useReducer로 복잡한 상태 관리하기useState는 간단한 상태엔 좋지만, 복잡해지면 useReducer가 더 깔끔해요.import React, { useReducer } from 'react';type CounterState = { count: number };type CounterAction = { type: 'increment' } | { type: 'decrement' };function reducer(state: CounterState, action: CounterAction): CounterState { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrem..

1. 재사용 가능한 버튼 컴포넌트 만들기// components/Button.tsximport React from 'react';interface ButtonProps { label: string; onClick: () => void; disabled?: boolean;}const Button: React.FC = ({ label, onClick, disabled }) => { return ( {label} );};export default Button;// App.tsximport Button from './components/Button';function App() { return ( alert('클릭됨')} /> );}✅ 컴포넌트에 pro..

1. useEffect 기본 사용법import React, { useEffect, useState } from 'react';function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const timer = setInterval(() => { setSeconds((prev) => prev + 1); }, 1000); return () => clearInterval(timer); // 컴포넌트 언마운트 시 정리 }, []); return 경과 시간: {seconds}초;}✅ useEffect는 side effect (부수 효과)를 처리하는 훅입니다.✅ 의존성 배열이 []인 경우, 컴포넌트가..

1. 상태 관리 (useState) 기본import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 );}export default Counter;✅ useState(0) 처럼 제네릭으로 타입을 명시해주는 것이 중요합니다.2. 문자열 입력 상태 관리function NameInput() { const [name, setName] = useState(''); const handleChange = (e: React.ChangeEvent) => { setName..

1. 리액트 + 타입스크립트 프로젝트 생성npx create-react-app my-app --template typescriptcd my-appnpm startcreate-react-app은 리액트 앱을 빠르게 만들 수 있는 CLI 툴입니다.--template typescript는 타입스크립트 설정이 포함된 템플릿을 사용한다는 뜻이에요.2. 타입스크립트 파일 확장자.tsx: JSX를 사용하는 컴포넌트 파일.ts: 일반 타입스크립트 파일 (예: 유틸 함수, 타입 정의 등)3. 첫 번째 컴포넌트 만들기// src/components/Greeting.tsximport React from 'react';interface GreetingProps { name: string;}const Greeting: Rea..