React: Zustand
Zustand는 가볍고 간단한 전역 상태 관리 라이브러리입니다. Context API보다 설정이 적고, Redux보다 훨씬 간단합니다.
개발 지식 노트
주제를 골라 개념과 사용 예제를 살펴보거나, 아래에서 최근 글을 확인하세요.
프로그래밍 언어
클라우드와 컨테이너
- Kubernetes 23개 글
- 플랫폼 3개 글
- AWS 4개 글
- 네트워킹 1개 글
- Argo 3개 글
- 클라우드 서비스 모델 9개 글
- BaaS 2개 글
- Docker 4개 글
- 서비스 메시 4개 글
데이터와 데이터베이스
- MySQL 5개 글
- 도구 1개 글
- 기본 개념 8개 글
- Mongodb 1개 글
- Redis 1개 글
- Dynamodb 1개 글
- Clickhouse 1개 글
- Duckdb 1개 글
- PostgreSQL 1개 글
- SQL 5개 글
- Elasticsearch 9개 글
시스템과 네트워크
소프트웨어 개발
관측과 모니터링
AI
- AI 31개 글
알고리즘
- 알고리즘 7개 글
보안
에세이
- 에세이 4개 글
웹 개발
- React 24개 글
최근 포스트
React: Context API, useReducer
Context API는 Props를 여러 단계로 내려보내지 않고 전역으로 데이터를 공유하는 방법입니다. useReducer는 복잡한 상태 로직을 정리하는 Hook입니다. 두 가지를 함께 사용하면 외부 라이브러리 없이도 전역 상태 관리를 구현할 수 있습니다.
React: useRef, useCallback, useMemo
useRef, useCallback, useMemo는 성능 최적화와 DOM 접근을 위한 Hook입니다. 처음에는 useState와 useEffect만으로도 충분하지만, 앱이 커지면 이 Hook들이 필요합니다.
React: 커스텀 Hook
커스텀 Hook은 반복되는 상태 로직을 별도 함수로 분리해 재사용하는 패턴입니다. 이름이 반드시 use로 시작해야 하며, 내부에서 다른 Hook을 사용할 수 있습니다.
React: React Router
React Router는 React 앱에서 클라이언트 사이드 라우팅을 제공하는 라이브러리입니다. 페이지 이동 시 서버에 요청하지 않고 JavaScript로 화면을 전환합니다.
React: useEffect
useEffect는 컴포넌트가 렌더링된 후 사이드 이펙트(Side Effect)를 실행하기 위한 Hook입니다. 사이드 이펙트란 API 호출, DOM 직접 조작, 타이머 설정, 이벤트 구독 등 렌더링 외부의 작업을 말합니다.
React: 리스트 렌더링
React에서 리스트를 렌더링할 때는 JavaScript의 Array.map() 메서드를 사용합니다. 각 항목에는 반드시 고유한 key 속성을 지정해야 합니다.
React: 이벤트 처리
React의 이벤트 처리는 HTML의 이벤트 처리와 유사하지만, 몇 가지 차이점이 있습니다. 이벤트 핸들러 이름은 카멜케이스를 사용하고, 함수를 직접 전달합니다.
React: State (useState)
State(상태)는 컴포넌트 내부에서 관리하는 동적 데이터입니다. State가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링합니다. useState Hook을 사용해 함수형 컴포넌트에서 상태를 관리합니다.
React: Props
Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다. Props는 읽기 전용(Read-Only)으로, 자식 컴포넌트는 전달받은 props를 변경할 수 없습니다.