react

이벤트에 응답하기이벤트 핸들러는 클릭, 마우스 호버, 폼 입력, 포커스 등사용자 상호작용에 반응해 실행되는 사용자 정의 함수이다.React에서는 JSX에 함수를 전달하는 방식으로 이벤트를 처리한다.이벤트 핸들러 추가하기export default function Button() { function handleClick() { alert("You clicked me"); } return I don't do anything;}위 코드에서 handleClick은 이벤트 핸들러이다.이벤트 핸들러의 특징 ✍️보통 컴포넌트 내부에서 정의된다handle로 시작하고 이벤트 이름을 뒤에 붙이는 경우가 많다JSX에는 호출이 아니라 전달한다onClick={handleClick} // ✅onClick={ha..

컴포넌트를 순수하게 유지하기React는 내가 작성하는 모든 컴포넌트를 순수 함수라고 가정한다.즉, 같은 입력이 주어지면 컴포넌트는 언제나 같은 JSX를 반환해야 한다는 전제를 가지고 동작한다.이 개념을 이해하는 것이 React 렌더링 방식과 성능 최적화를 이해하는 데 중요한 출발점이었다.순수성: 수식으로서의 컴포넌트function Recipe({ drinkers }) { return ( Boil {drinkers} cups of water. Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice. Add {0.5 * drinkers} cups of milk to boil and su..

리스트 렌더링 (Rendering Lists)React에서는 배열 데이터를 기반으로 JSX를 반복 렌더링하는 경우가 매우 많다.이 과정에서 map()을 사용해 리스트를 만들 수 있었고, 이때 key의 중요성을 함께 이해하게 되었다 🧠배열을 데이터로 렌더링하기const people = [ "Creola Katherine Johnson: mathematician", "Mario José Molina-Pasquel Henríquez: chemist", "Mohammad Abdus Salam: physicist", "Percy Lavon Julian: chemist", "Subrahmanyan Chandrasekhar: astrophysicist",];export default function Lis..

🧠 Tanstack Query 캐싱 메커니즘 이해하기React Query(Tanstack Query)는 서버 상태 캐싱을 통해 불필요한 네트워크 요청을 줄이고,사용자 경험을 개선해준다.이번 글에서는 쿼리의 생명주기와 캐싱 메커니즘을 실제 예제를 통해 정리해봤다.🔄 쿼리 생명주기 한눈에 보기fetching → fresh → stale → inactive → deleted 각 상태는 쿼리가 언제 패칭되고, 언제 재사용되며, 언제 메모리에서 제거되는지를 결정한다. 🔄 Fetching서버에 데이터 요청을 보내고 있는 상태다.아직 응답을 받지 못해 캐시 데이터가 없거나 갱신 중이다.✅ Fresh서버에서 받아온 데이터가 신선하다고 판단되는 상태다.staleTime 이내의 데이터로, 리페칭 없이 그대로 사용된다..

왜 굳이 combine을 쓰는 걸까?Zustand를 쓰다 보면state랑 action을 한 객체 안에 다 때려 넣는 방식이 가장 먼저 떠오른다.export const useStore = create((set) => ({ count: 0, increase: () => set(...)}));​ 처음엔 이게 제일 직관적이고 문제도 없어 보인다.근데 상태가 조금만 늘어나고, 타입스크립트를 같이 쓰기 시작하면 store 타입 정의가 점점 귀찮아지기 시작했다.😑그래서 Zustand에서 제공하는 미들웨어 중 하나인 combine을 공부해보기로 했다. combine은 뭘 해주는 미들웨어일까?combine은 한 줄로 요약하면 이거다.타입 추론 + 역할 분리를 동시에 도와주는 미들웨어combine을 사용하면state..

헷갈리기만 하던 props를 드디어 React 공식문서를 보며 조금은 이해하고 정리해봤다. JSX로 마크업을 작성하면서 어떻게 데이터를 컴포넌트 간에 주고받는지, 구조 분해 할당, 기본값, spread 문법, children까지… 개념이랑 예제를 같이 따라하면서 조금씩 맥이 잡히기 시작했고 여기 그 흐름을 정리해보려 한다. 📚 Step 1 — Props 개념 정리✅ Prop의 기본값 지정하기값이 지정되지 않았을 때 prop에 기본값을 주고 싶다면, 구조 분해 할당에서 =으로 지정한다.function Avatar({ person, size = 100 }) { // size가 undefined면 100 사용}JSX에서 만 넘겨도 size는 100으로 기본 설정됨.✅ JSX spread 문법으로 pro..

📌 JSX 규칙1. 하나의 루트 엘리먼트로 반환하기하나의 컴포넌트에서는 반드시 하나의 부모 요소만 반환해야 한다.JSX에서는 다음과 같이 감싸줘야 한다. App.js Hedy Lamarr's Todos ... 📍 만약 를 추가하고 싶지 않다면 와 로 감싸는 Fragment 문법도 가능하다.2. 모든 태그는 반드시 닫아주기JSX는 HTML보다 엄격한 문법을 가진다. 같은 self-closing 태그도 반드시 /로 닫아야 한다.3. 대부분은 카멜케이스 사용하기DOM 속성은 HTML과 달리 **카멜케이스(camelCase)**로 작성한다.그리고 class는 JS 예약어라서 className으로 작성해야 한다.4. 문자열은 따옴표로 감싸기문자열 속성은 반드시 따옴표(' 또는 ")로 감싼다..

🚩 Root 컴포넌트, 구조를 잡자React에서 컴포넌트를 구성해가며 느낀 점은, 결국 어떤 앱이든 출발점이 있다는 것.이 출발점이 바로 Root 컴포넌트다. 공식 문서에선 보통 App.jsx가 루트 역할을 한다고 설명한다.이 루트 컴포넌트는 전체 앱의 최상단에 위치하며, 다른 모든 컴포넌트들을 포함하게 된다.🧱 컴포넌트 구조 이해하기컴포넌트 작성의 기본 흐름은 작성 → 내보내기 → 불러오기다.이 과정에서 default와 named export의 개념도 함께 다뤘다. ✅ Gallery.jsx 예시function Profile() { return ( );}export default function Gallery() { return ( Amazing scientists ..