React
1.🚀 React를 처음 접할 때 헷갈리기 쉬운 JSX & 상태 관리 핵심 정리
React는 사용자와 웹 사이트가 상호작용할 수 있도록 도와주는 컴포넌트 기반 UI 라이브러리입니다.하지만 처음 JSX 문법과 상태 관리를 접하면 HTML이나 일반 JS와 다르게 동작하는 부분이 있어 자주 헷갈리곤 하죠.이번 글에서는 React를 처음 배울 때 꼭 짚고
2.React 컴포넌트와 Hook 핵심 요약 정리
외부에 새로운 function 생성 return() 안에 JSX 문법의 HTML 담기 <함수명 /> 또는 <함수명></함수명> 으로 사용 익명 함수 형태도 가능컴포넌트 이름은 항상 대문자로 시작해야 함컴포넌트는 순수 함수(Pure Function)
3.React vs Vue 비교 정리
React와 Vue는 상태를 감지하는 방식에서 철학부터 접근 방식까지 확연히 다릅니다. 어떤 상황에서 어떤 프레임워크가 더 적합한지, 실제 사용 시 고려할 핵심 차이들을 정리해보았습니다.핵심 요약: React는 상태 객체의 참조값만 비교합니다.상태가 바뀌었다는 것은 '
4.왜 React를 많이 사용할까?
React가 Vue에 비해 더 많이 사용되는 이유는 단순히 기술적인 우월함 때문이 아니라, 여러 생태계적, 산업적 요인이 복합적으로 작용했기 때문입니다. 아래에서 그 이유를 정리해 볼게요. React는 2013년 Facebook에서 처음 공개되었으며, Facebook
5.프레임워크와 라이브러리
개발을 하다 보면 "React는 라이브러리고, Vue는 프레임워크다" 같은 말을 자주 듣게 됩니다.그런데 뭐가 어떻게 다른 걸까? 비교 정리 해보겠습니다.프레임워크는 "내가 정한 방식대로 너가 동작해" 라이브러리는 "너가 원하는 타이밍에 나를 써"→ 즉, 누가 "흐름
6.Redux 요약 정리
Redux: 상태 관리를 위한 중앙 저장소 React 앱이 커지면서 컴포넌트 간 상태 공유가 복잡해질 때, Redux를 사용하면 전역 상태를 예측 가능하게 관리할 수 있습니다. ✅ 핵심 요약 Redux는 전역 상태 관리 도구입니다. 상태(state)는 단 하나의 중앙 저장소(store)에서 관리됩니다. 상태 변경은 dispatch(action) → r...
7.상태관리 라이브러리, Zustand
Zustand: 간단하고 가벼운 전역 상태 관리 라이브러리 Redux가 너무 무겁게 느껴질 때, 더 간단하고 직관적인 상태 관리 방법이 필요할 때 Zustand가 좋은 대안이 됩니다. Zustand는 React 앱에서 전역 상태를 관리하기 위한 가벼운 상태 관리 라이브러리입니다. Zustand는 독일어로 "상태(state)"를 의미하며, Redux처럼 ...
8.React의 상태관리 라이브러리 비교 분석
React 상태 관리 라이브러리 비교 분석 React에서 컴포넌트 간 상태를 관리하는 방법은 다양하며, 프로젝트 규모나 요구 사항에 따라 적절한 라이브러리를 선택하는 것이 중요합니다. 이 글에서는 대표적인 상태 관리 도구들을 기능, 사용성, 확장성 측면에서 비교해봅니다. ✅ 비교 대상 | 라이브러리 | 특징 | 추천 ...
9.Tanstack Query?
✅ TanStack Query란? 기존에 React Query로 알려졌던 라이브러리는 현재 TanStack Query라는 이름으로 발전했습니다. 단순한 데이터 fetching 라이브러리를 넘어, \\서버 상태(server state)\\를 효과적으로 관리하기 위한 도구로 자리 잡았습니다. 클라이언트 상태(state)와는 달리, 서버 상태는 외부 데이터 ...
10.TanStack Query 활용
핵심 개념: QueryClient > QueryClient는 TanStack Query의 핵심 객체로, 전체 쿼리와 캐시의 중심 컨트롤러 역할을 합니다. 모든 쿼리 요청, 캐싱 전략, 무효화 등을 여기서 제어합니다. 🚨 QueryClientProvider로 감싸지 않으면 useQuery, useMutation 등을 사용할 수 없습니다. 🚨 매 렌더...
11.⚛️ React 렌더링 최적화: memo, useCallback, useMemo
✅ 1. React.memo – 컴포넌트 리렌더링 방지 💡 한 줄 요약: props가 변경되지 않았다면 컴포넌트의 리렌더링을 건너뜁니다. 🧠 언제 쓰나요? 부모 컴포넌트가 자주 리렌더링되는 구조에서, 자식 컴포넌트의 props가 변하지 않는다면 React.memo를 통해 리렌더를 막을 수 있습니다. 📦 예제 코드 > +1 버튼을 눌러도 List...
12.캐시 전략, React Query vs Redux vs SessionStorage
프로젝트에서 React Query를 상태 공유 방식으로 선택한 이유를 정리해보았습니다. 이 포스트는 동일한 목적을 위해 사용할 수 있는 몇 가지 다른 방식들과 함께 비교하고, 실제로 왜 React Query를 선택하게 되었는지를 설명해보려 합니다. ✅ 1. React Query 캐시 방식 (현재 선택) ✔ 장점 서버 + 클라이언트 상태를 통합 관리 ...
13.React 컴포넌트 트리에서 API 데이터 전달: props vs 상태 관리 라이브러리
React에서 데이터 흐름을 설계할 때 흔히 마주치는 두 가지 방식이 있습니다:최상위 컴포넌트에 중앙 훅을 두고 props로 데이터 전달전역 상태 관리 라이브러리(Redux, Zustand 등)를 활용해 하위 컴포넌트에서 직접 접근각 방식은 상황에 따라 장단점이 분명하