(썸네일 이미지는 해당 글을 요약 후 ChatGPT 이미지로 생산한 것 입니다.)React에서 최적화 얘기하면 항상 따라오는 말이 있다.useMemo는 값을 메모이제이션 (value)useCallback은 함수를 메모이제이션 (func)말은 쉬운데, 실제로는 “언제 써야 하는지 / 뭐가 다른지”가 헷갈림...이번 글은 실무에서 자주 터지는 케이스 중심으로 차이를 정리함.결론부터useMemo: 값(계산 결과)을 캐싱한다.useCallback: 함수(콜백)의 참조를 캐싱한다.그리고 사실상 이렇게 생각해도 된다.useCallback(fn, deps) 는useMemo(() => fn, deps) 의 syntax sugar.즉, 둘 다 “캐싱”이 맞고, 캐싱 대상이 다르다.왜 캐싱이 필요할까? (React의 리렌..

(썸네일 이미지는 해당 글을 요약 후 ChatGPT 이미지로 생산한 것 입니다.)이번에 프리랜서로 프로젝트를 진행하면서Grid + react-hook-form + SelectBox 조합이 자주 사용되어 있는곳을 보았다.register(`sampleData.SampleList.${rowIdx}.Example`)화면에서도 잘 동작했고,폼 값도 문제없이 들어오는 것처럼 보였다. 하지만 프로젝트가 커지고정렬, 페이지 전환, 행 추가/삭제가 들어가면서이 방식이 구조적으로 위험하다는 걸 알게 됨.왜 rowIdx 기반 register가 위험한가?rowIdx는 화면 기준 인덱스 즉,정렬필터페이지 전환행 삽입 / 삭제이 중 하나만 발생해도같은 데이터라도 rowIdx는 언제든 바뀔 수 있다. 하지만 react-hook-f..

React 그리드에서 SelectBox 렌더링이 느렸던 이유와 해결 방법그리드 셀마다 SelectBox 컴포넌트를 사용하는 화면에서전체 구조를 정리하고 최적화를 적용했는데도페이지 이동이나 렌더링이 여전히 느린 문제가 있었다.원인을 추적해보니, 문제는 SelectBox 내부 로직에 있었다.문제 상황그리드의 각 셀에 SelectBoxD 컴포넌트 사용셀 수가 많고 페이지 이동 / 필터 시 리렌더가 자주 발생체감상 SelectBox가 원인처럼 느껴짐SelectBoxD 내부를 살펴보니 다음과 같은 코드가 있었다. 문제 1. renderValue에서 매번 find 실행const renderValue = () => value ? selectList.find(item => item.codeValue == val..

전역 Auth Store (Zustand 권장)user, status, etag(캐시 비교 API용도), permissions(혹은 권한 관련 data) 위주로 저장Rotue GuardApp 진입 혹은 Routing시에 ensurePermissions()접근조건 확인이기 때문에 하위 Component에서는 호출금지.재검증 트리거새로고침(F5)/탭 포커스/online 이벤트 → 지정 TTL 이상시 ensurePermissions() 서버에서 권한 변경(추가/삭제 등 수정 시): WebSocket/SSE Event → ensurePermissions({ force:true })Server권한 API res에 ETag Headerreq if-None-Match가 같을 시 304 Not Modifed권한 수정 ..

1️⃣ ?: (Optional Property)📌 TypeScripttype User = { id: number name?: string // 있어도 되고 없어도 됨}const u1: User = { id: 1, name: "Tom" }const u2: User = { id: 2 } // name 생략 가능console.log(u2.name) // undefined👉 ?: 는 프로퍼티가 없어도 된다는 의미 (없으면 undefined)📌 C#public class User { public int Id { get; set; } public string? Name { get; set; } // null 허용}var u1 = new User ..

⚛️ React 프로젝트 구조, 빠르게 파악하는 방법새로운 React 프로젝트에 참여하거나, 오픈소스 프로젝트 코드를 처음 열어보면 “어디서부터 봐야 하지?” 하는 고민.짧은 시간 안에 전체 구조를 이해하려면 몇 가지 핵심 관문을 짚는 게 효율적.1️⃣ 최상위 설정 파일 확인package.json어떤 빌드도구를 쓰는지 (CRA, Vite, Next.js 등)주요 라이브러리 (React Router, Redux, Zustand, React Query 등)스크립트(dev, build, lint, test)환경/설정 파일vite.config.ts, webpack.config.js, next.config.js → 빌드 및 번들링 구조tsconfig.json → 경로 별칭(@/…) 확인.eslintrc, .pre..