React8분
React useMemo와 useCallback은 언제 써야 할까?
리뷰에서 이런 코드를 자주 만납니다.
전체 태그
#react 22개 글
- 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 리렌더링은 언제 일어날까?
검색창 하나와 긴 목록이 있는 화면을 생각해 보겠습니다.
- 프론트엔드12분
Next.js와 Electron 비교: 같은 React, 다른 실행 구조
Next.js와 Electron은 둘 다 JavaScript와 TypeScript, React 생태계를 활용합니다. 화면만 만들 때는 꽤 비슷해 보입니다. 컴포넌트를 나누고 상태를 관리하며, npm 패키지를 설치하고 개발자 도구로 화면을 확인하는 흐름도 익숙합니다.
- 프론트엔드10분
Leaflet 지도가 느려지는 3가지 원인: React key, SVG 렌더러, 가드 위치
지도 위에 H3 육각 격자를 얹은 화면을 만들었습니다. 셀을 누르면 인접한 여섯 셀이 함께 칠해지는, 영업 구역을 나눠 보는 화면입니다.
- 웹 인프라8분
로컬에서는 정상인데 운영에서만 깨진 AI 스트리밍
문서 AI 기능을 로컬에서 완성하고 운영에 배포했을 때, 답변 자체는 정상인데 화면의 느낌이 완전히 달라졌습니다. 스트리밍 답변은 한꺼번에 나타났고, 전체 화면 패널은 작은 섹션 안에 갇혔으며, 모달이 열리자마자 배경 스크롤 잠금이 풀렸습니다.
- 프론트엔드9분
Google 번역을 켰더니 React 앱이 오류 화면으로 바뀐 이유
한국어, 영어, 일본어, 중국어를 직접 제공하는 React 랜딩 페이지에서 예상하지 못한 문제가 생겼습니다. Chrome이 띄운 "이 페이지를 번역하시겠습니까?" 제안을 수락하면 번역이 시작되는 듯하다가, 잠시 뒤 사이트의 "일시적인 오류가 발생했습니다" 화면으로 바뀌었습니다.