React
1.[React] React시작하기
[React] React시작하기
2.[React] 기초
Component, CSS, Event, Props
3.[React] 기초 Hook
useState, useEffect, useContext, useLocation, useCallback
4.[React] json-server
더미데이터 만들기, json-server, useEffect
5.[React] 페이지 이동(Route, Link...)
Route, Link, useNavigate
6.[React] Async 와 Await
[React] Async 와 Await
7.[React] Modal 팝업창 띄우기
[React] Modal 팝업창 띄우기
8.[React] axios와 fetch 비교
[React] axios와 fetch 비교
9.[React] JSON 기초
[React] JSON 기초
10.[React] 핫 리로딩
핫 리로딩!!!
11.Webpack DevServer Proxy
Webpack DevServer Proxy
12.[React] 코드 스플리팅(code splitting)
코드 스플리팅(code splitting)
13.[React] Chlidren
children은 React에서 특별한 용도로 사용되는 props 중 하나이다.
14.[React] useSWR
useSWR은 Stale While Revalidate
15.[React] withCredentials
withCredentials
16.[React] useRef
useRef
17.[React] WebSocket - 1
웹 소켓(WebSocket)!!
18.[React] WebSocket - Socket.IO
Socket.IO
19.[Redux] Redux 기초
Redux 시이작
20.[Redux] Redux-Toolkit 기초
Redux Toolkit
21.[React] Cookie, Session
쿠키와 세션
22.[React] Token, JWT
Token 과 JWT 1편
23.[Redux] configureStore , createSlice 사용하기
configureStore는 Redux 스토어를 생성하는 함수로, Redux의 기본 createStore 함수보다 간편하게 스토어를 설정할 수 있도록 도와준다.
24.[Redux] redux-persist 데이터 영구저장!
redux-persist로 데이터 영구 저장하자..!
25.[React]AccessToken 재발급 받기
AccessToken 재발급 받기!!
26.[React] utils와 hooks 구분하기
React 프로젝트 개발 시 헷갈리던 utils와 hooks 구분!
27.[React] 디자인패턴을 적용해 React의 장점을 살려보자!!!
React를 React답게!
28.1편 React가 "선언적"이라는 말, 진짜 의미는 뭘까?
React는 왜 "선언적"일까? React의 선언적 특성은 특정 개인이 만든 슬로건이 아니라, React 자체의 본질적 특성을 나타내는 공식적인 표현이다. React 공식 문서(react.dev): "Declarative views make your code
29.1-1편 React의 선언적 경계 패턴: Suspense와 ErrorBoundary
“선언적” 철학을 경계로 구현한다
30.1-2편 useSuspenseQuery — 데이터 패칭까지 선언적으로
들어가며 — 1–2편에서 이어가기 1–2편에서는 “로딩/에러 같은 불완전성은 컴포넌트 바깥의 경계(Suspense, ErrorBoundary)로 넘긴다”는 철학을 다뤘다. 이 철학 덕분에 컴포넌트는 성공 상태만 책임지고, 대기와 실패는 경계가 대신 담당하게 된다.
31.2편 React는 왜 컴포넌트 기반을 택했을까?
이번 글에서는 그 선언적 철학이 “컴포넌트”라는 단위를 중심으로 어떻게 구현되는지를 살펴본다.
32.2-1편 Compound Pattern — 조합형 컴포넌트 설계
작은 단위를 조합해 복잡한 UI를 만드는 방식으로, React의 Composition over Inheritance 철학을 실무에 구현한다.
33.2-2편: Headless 컴포넌트 — 로직과 UI의 완전한 분리
React가 강조해온 합성 철학을 끝까지 밀어붙인 결과, UI는 껍데기로 두고 로직만 남기는 Headless 컴포넌트가 탄생했다.
34.2-3편: Polymorphic 컴포넌트 — as prop으로 유연한 확장
앞선 글에서 우리는 Compound Pattern이 합성을 “역할 단위로 쪼개기”로,Headless 컴포넌트가 합성을 “로직과 UI의 분리”로 확장한 모습을 살펴봤다.그렇다면 이번엔 이런 질문을 던져보자.“컴포넌트가 표현하는 태그 자체도 바뀔 수 있어야 하지 않을까?”
35.3편: React는 props를 통한 단방향 통신을 한다
“데이터는 한 방향으로만 흐른다. 예측 가능성을 위해.”