joamashi

🥊 Redux vs Zustand: 한눈에 비교항목 Redux Zustand철학명확한 액션 흐름 (Flux 패턴)간단하고 유연한 상태 공유복잡도다소 복잡 (boilerplate 많음)매우 간결함비동기 처리createAsyncThunk, middleware 필요그냥 함수 호출 (Promise, async 자유로움)전역 상태 설정 방식createSlice, configureStore 등 필수create 함수로 store 생성사용법useSelector, useDispatch 필요useStore 훅 하나로 끝모듈화reducers/actions 따로 관리store 안에서 다 처리 가능타입스크립트 지원공식 지원 좋음별도 선언 필요하지만 잘 됨러닝 커브약간 있음매우 쉬움리렌더링 최적화memo, reselect 등 ..

👣 먼저 준비하기 (공통 셋업)1. 필요한 라이브러리 설치npm install @reduxjs/toolkit react-redux redux-persist2. Redux 스토어 만들기 (src/app/store.ts)import { configureStore } from '@reduxjs/toolkit'import todoReducer from '../features/todo/todoSlice'import authReducer from '../features/auth/authSlice'import themeReducer from '../features/theme/themeSlice'import filterReducer from '../features/filter/filterSlice'// Redux 스..

✅ 1. useAppSelector, useAppDispatch (타입 안전한 Hooks)Redux를 사용할 때 타입을 명시적으로 설정하면 더 안전하게 사용할 수 있습니다.// src/app/hooks.tsimport { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'import type { RootState, AppDispatch } from './store'export const useAppDispatch: () => AppDispatch = useDispatchexport const useAppSelector: TypedUseSelectorHook = useSelector그리고 기존 useSelector, useDispatch..

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..

✅ 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 }:..

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..

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..

핵심 주제:모달 안의 폼 처리제출 후 초기화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..

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..

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 ..

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. 상태 관리 (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..

React Query: **서버 상태(Server State)**를 관리하는 도구Zustand: **클라이언트 상태(Client State)**를 관리하는 전역 상태 관리 도구핵심 차이 요약주 용도서버 데이터 캐싱 및 비동기 처리전역 상태(클라이언트 로컬 상태) 관리상태 저장 위치React Query 내부 캐시 (비휘발성)메모리 내 저장 (휘발성)주요 기능데이터 페칭, 캐싱, 리페치, 오류 처리글로벌 스토어, 상태 간단 공유비동기 처리내장 지원 (useQuery, useMutation 등)직접 fetch나 axios 사용 필요상태 공유 방식내부 Hook (useQuery 등)create로 만든 스토어 Hook 사용사용 시나리오 예시1. React Query 예시: 서버에서 유저 목록을 가져오는 경우// ..

React Query를 사용하는 이유는 간단히 말해 비동기 상태 관리를 더 쉽고 강력하게 하기 위해서 입니다.기존에는 useState, useEffect, axios 등을 수동으로 조합해야 했던 것을 React Query가 자동화 + 최적화해줍니다.🔥 기존 방식의 문제점복잡한 상태 관리useState, useEffect로 로딩/에러 처리코드 중복, 재사용 어려움중복 요청 발생같은 데이터를 여러 컴포넌트에서 요청동일한 API 여러 번 호출refetch 타이밍 관리 어려움데이터 변경 후 목록 다시 불러와야 함수동으로 refetch() 또는 재랜더링캐싱 없음매번 API 호출느림 + 비용 증가무한스크롤, 필터링 구현 번거로움페이지 번호 상태 직접 관리복잡한 로직 필요SSR 대응 어려움Next.js에서 API ..

React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, 최신 버전인 React 18에서는 개발자 경험과 애플리케이션 성능을 향상시키기 위한 여러 기능이 도입되었습니다.자동 배칭(Auto Batching): 이제 여러 상태 업데이트가 자동으로 배칭되어, 불필요한 리렌더링을 줄이고 성능을 향상시킵니다. 예를 들어, 이전에는 각각의 setState 호출이 별도의 렌더링을 유발했지만, React 18에서는 이러한 호출이 자동으로 배칭되어 한 번의 렌더링만 발생합니다. citeturn0search5동시성 기능(Concurrent Features): React 18은 동시성 기능을 도입하여, 렌더링 작업을 여러 작은 단위로 나누어 우선순위에 따라 처리합니다. 이를 통해 사용자 인터페이스..

Firebase Hosting에서 React 앱을 배포할 때, react-router-dom을 사용 중이라면 SPA(Single Page Application)의 특성 때문에 라우팅 문제로 404 에러가 발생할 수 있습니다. Firebase는 기본적으로 URL 경로에 직접 접근하면 해당 경로에 파일을 찾으려고 하기 때문입니다. 이를 해결하려면 Firebase의 rewrites 설정을 통해 모든 요청을 React 앱의 index.html로 리다이렉트하도록 설정해야 합니다.해결 방법Firebase Hosting 설정 파일 수정 Firebase 프로젝트의 firebase.json 파일을 열어 아래와 같이 설정하세요:public 폴더는 React 앱이 빌드된 폴더(build 또는 dist)로 지정해야 합니다.r..