전체 글

🧠 React State를 다시 이해하게 된 순간 (객체, 불변성, Immer)React를 사용하면서 state를 통해 화면이 업데이트된다는 개념 자체는 이미 익숙했다.다만, “왜 이렇게 동작하는지”에 대한 이해는 부족했던 상태였다.React 공식문서를 보면서 가장 크게 느낀 건 이 부분이다.👉 state는 단순한 값이 아니라, 매 렌더링마다 교체되는 하나의 스냅샷이다❌ 알고는 있었지만, 정확히 이해하지 못했던 부분이전까지는 객체 state를 다룰 때 이렇게 작성하는 경우가 있었다.shape.position.x += dx;직관적으로는 값이 변경되었기 때문에 화면도 업데이트될 것이라고 생각했다.하지만 실제로는 UI가 전혀 변경되지 않았다.🔍 왜 동작하지 않았을까?핵심은 이거였다.React는 state..

🧠 React 렌더링 React 문서를 보다가 “렌더링이 이렇게 동작한다고?” 싶었던 부분이 있었다.특히 헷갈렸던 건 이거였다.👉 “값이 계속 바뀌면 렌더링도 계속 일어나는데, 이거 비효율 아닌가?”🔄 렌더링은 언제 일어날까? 공식 문서 기준으로 렌더링은 두 가지 경우에 발생한다.초기 렌더링state 또는 props 변경예를 들어 이런 코드가 있다.export default function Clock({ time }) { return ( {time} );}그리고 부모에서 time을 매초 바꾼다면👉 Clock 컴포넌트는 매초 다시 렌더링된다🤔 그럼 매초 다시 그리는 거 아닌가?여기서 내가 착각했던 부분렌더링 = DOM 다시 그림 ❌이게 아니었다.🔍 React..

🧠 React State, 생각보다 헷갈렸던 부분React 공식 문서 보다가“아 이건 좀 제대로 이해해야겠다” 싶었던 부분이 있었다.🔒 State는 격리되어 있다처음엔 state를 그냥 “값 저장소” 정도로 생각했는데생각보다 중요한 특징이 있었다.👉 같은 컴포넌트를 여러 번 렌더링해도 state는 서로 공유되지 않는다예를 들면:이렇게 같은 컴포넌트를 두 번 써도 각각 완전히 다른 state를 가진다. 실제로 버튼을 눌러보면👉 한쪽만 바뀌고 다른 쪽은 그대로다🤔 이게 왜 중요하냐처음엔 그냥 당연한 거 같았는데 곰곰이 생각해보니까 이거 잘못 이해하면 꽤 위험하다state를 전역처럼 착각하고 설계하게 됨컴포넌트끼리 값 공유된다고 착각함결국 데이터 흐름 꼬임🚨 Hook은 아무 데서나 쓰는 게 아니다또..

이벤트에 응답하기이벤트 핸들러는 클릭, 마우스 호버, 폼 입력, 포커스 등사용자 상호작용에 반응해 실행되는 사용자 정의 함수이다.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..

조건부 렌더링 정리 (React)React에서 조건에 따라 JSX를 렌더링하는 방법은 여러 가지가 있다.공식 문서에서는 상황에 맞게 다양한 패턴을 사용하라고 권장하고 있으며, 각 방식마다 쓰임새가 명확히 다르다 ✍️아래는 실제로 사용하면서 정리한 조건부 렌더링 선택 기준이다.1️⃣ 조건부로 JSX 반환하기 (if / return)function Item({ name, isPacked }) { if (isPacked) { return {name} ✅; } return {name};}가장 직관적인 방식이다.조건에 따라 완전히 다른 JSX를 반환해야 할 때 사용하기 좋았다.조건 분기가 명확할 때 👍JSX 구조가 크게 달라질 때 👍early return 패턴으로 읽기 쉬웠다2️⃣ 조건부로 null..

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