React8분
React useMemo와 useCallback은 언제 써야 할까?
리뷰에서 이런 코드를 자주 만납니다.
전체 카테고리
React 16개 글
컴포넌트와 상태 관리의 기본부터 렌더링·성능 문제까지 살펴봅니다. 실제 화면을 만들며 마주치는 문제를 주제별로 찾아보세요.
먼저 읽어볼 글
이 순서로 살펴보세요
우리 서비스에 적용할 계획이 있으신가요?
홈페이지·웹서비스 개발 살펴보기 →전체 글
- React7분
React Error Boundary와 try/catch의 차이
대시보드에 위젯이 여섯 개 있습니다. 그중 매출 차트 위젯이 서버에서 예상과 다른 모양의 데이터를 받아 렌더링 중에 오류를 냅니다.
- React9분
React useActionState와 useOptimistic으로 폼 다루기
견적 요청 폼을 보내는 코드입니다.
- React8분
React 커스텀 훅은 state를 공유할까?
장바구니 아이콘과 장바구니 페이지가 모두 담긴 상품 수를 보여 줘야 해서, 로직을 커스텀 훅으로 뺐다고 해 보겠습니다.
- React9분
React Context와 리렌더링
로그인한 사용자 정보와 장바구니를 앱 어디서나 쓰려고 컨텍스트 하나를 만들었다고 해 보겠습니다.
- React9분
React state 구조 설계 원칙
견적함 화면에 품목 목록과 합계가 있습니다.
- React8분
React useRef와 state의 차이
검색어를 입력하고 1초 동안 멈추면 검색하는 입력칸입니다.
- React12분
React transition과 useDeferredValue
상품 1만 개를 거르는 검색 화면입니다.
- React11분
React 서버 함수(use server)와 인증
관리자만 들어올 수 있는 화면에 상품을 지우는 버튼이 있습니다.
- React10분
React Suspense와 스트리밍, 그리고 404 상태 코드
이 블로그의 카테고리 페이지는 없는 카테고리 주소로 들어오면 「찾을 수 없음」 화면을 보여 줍니다. 코드에는 분명히 notFound() 가 있었습니다. 그런데 응답 상태 코드를 찍어 보니 이렇게 나왔습니다.
- React12분
React 서버 컴포넌트와 use client 경계
상품 상세 페이지에 「장바구니 담기」 버튼을 달려고 페이지 파일 맨 위에 한 줄을 더했다고 해 보겠습니다.
- React10분
React 훅 규칙과 조건부 return
로그인하지 않은 사용자에게는 안내 문구만 보여 주는 컴포넌트입니다.
- React9분
React key와 index: 목록 입력값이 뒤섞이는 문제
할 일 목록에서 줄마다 메모를 적는 입력칸이 있습니다.
- React10분
React useEffect와 정리 함수: 외부 시스템 동기화
채팅방 화면이 방에 접속하는 코드입니다.
- React10분
React state 스냅샷과 업데이터 함수
버튼 하나로 숫자를 3 올리는 코드입니다.
- React10분
React 리렌더링은 언제 일어날까?
검색창 하나와 긴 목록이 있는 화면을 생각해 보겠습니다.