React (5) 썸네일형 리스트형 React에서 State와 Props의 차이점 React에서 State와 Props의 차이점 완벽 정리 1. State(상태)란? 컴포넌트 내부에서 선언하고 관리하는 데이터입니다. 사용자 입력, 네트워크 응답 등 동적으로 변하는 값을 저장합니다. 상태가 바뀌면 해당 컴포넌트가 자동으로 리렌더링됩니다. setState, useState 등을 통해 값을 변경할 수 있습니다. // 예시 const [count, setCount] = useState(0); // setCount(1) 호출 시 컴포넌트가 다시 렌더링됨 2. Props(프로퍼티)란? 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다. 자식 컴포.. React 기본 상태관리 hook 및 다양한 라이브러리 정리 React 상태관리 훅 & 라이브러리 완전 정리 1. React의 기본 상태관리 훅 Hook 설명 주요 용도 코드 예시 useState 컴포넌트 내부에서 상태를 선언하고 관리하는 가장 기본적인 훅. [상태값, 상태변경함수] 쌍으로 반환. 여러 개의 상태를 독립적으로 선언 가능. 간단한 UI 상태, 입력값, 토글 등 const [count, setCount] = useState(0); useR.. react : useQuery 에서 key 가 의미하는 것 useQuery에서 key는 캐싱과 데이터 업데이트를 관리하는 데 중요한 역할을 하는 고유 식별자다. React Query에서는 이 key를 기반으로 데이터를 가져오고, 상태를 캐싱하고, 리렌더링을 최적화한다. useQuery의 key란?key는 쿼리를 구별하는 식별자로 사용된다.같은 key를 가진 쿼리는 React Query의 캐시를 공유한다.key가 변경되면 해당 쿼리는 다시 실행된다.import { useQuery } from '@tanstack/react-query';const fetchUser = async () => { const res = await fetch('/api/user'); return res.json();};function UserProfile() { const { data.. React 상태 관리 문제 해결 과정 Next.js로 주문 내역 페이지를 만들고 있었다. 왼쪽에 주문 목록을 띄우고, 클릭하면 중간 섹션(Middle Section)에 상세 정보가 나와야 하는 구조였다. 근데 주문을 클릭해도 중간 섹션이 빈 채로 남아 있었다. 콘솔을 열어보니 이런 로그가 찍혀 있었다:page.tsx:189 Selected order in useEffect: undefinedpage.tsx:227 Order not found for selectedOrderId: 164API 호출은 잘 됐는데, 왜 데이터가 안 보이는 걸까? 하루를 이거 풀어보느라 씨름했다. 원인 파악코드를 뜯어보니 문제는 상태 관리에 있었다.상태 두 개로 나뉘어 있었다:sortedGroups: /api/orders/daily에서 받은 주문 데이터를 날짜별로 .. React : useMemo로 성능 최적화하기 useMemo란? useMemo는 React에서 값(또는 연산 결과)을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 Hook. 컴포넌트가 렌더링될 때마다 반복되는 비용이 큰 연산을 피하고, 캐싱된 값을 재사용할 수 있게 해준다. 결제 페이지에서 initialTotal과 changes 계산이 매 렌더링마다 반복되는 문제를 해결하기 위해 React의 useMemo를 활용했다. 이 과정에서 useMemo의 동작 원리와 사용법을 깊이 파악할 수 있었다.문제 상황기존 코드에서는 initialTotal이 매번 새로 계산되었다:const initialTotal = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0); c.. 이전 1 다음