Frontend/React

문제는 그 다음이었다 😶combine까지 정리하고 나서다음으로 자연스럽게 이어진 게 아래의 미들웨어였다.immersubscribeWithSelectorpersistdevtools한두 개도 아니고, 여러 개가 한 번에 등장했다.각각에 대한 설명은 있었지만, 처음엔 이런 느낌에 더 가까웠다.“개념 설명은 듣긴 했는데, 크게 와닿지는 않는다.” Zustand를 처음 접한 상태에서미들웨어까지 한 번에 이해하기엔정보량이 생각보다 많았다.불변성을 관리해준다는데, 지금 당장 체감은 잘 안 됐고 🤷‍♀️특정 값을 구독한다고 하는데, 언제 써야 할지 감이 안 왔고상태를 저장한다는 것도 그냥 옵션처럼 느껴졌고devtools는 있으면 좋겠지만 필수처럼 보이진 않았다 🧩정리하면 첫인상은 이랬다.👉 “없어도 동작은 할 ..

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

리액트를 쓰다 보면 언젠가는 꼭 전역 상태 관리라는 벽을 마주치게 된다.컴포넌트 트리가 조금만 깊어져도 props drilling이 거슬리기 시작하고,“이거 전역으로 빼야 하나?”라는 생각을 하게 된다. Zustand는 요즘 프론트엔드 생태계에서 가볍고 단순한 전역 상태 관리 라이브러리로 많이 언급되지만,정작 나는 이름만 들어봤지 실제로 써본 적은 없었다. 👉 편하다는데 뭐가 편한 거지?👉 Redux랑 뭐가 다르고, 진짜 실무에서 쓸 만한가? 이런 궁금증만 쌓인 채로 미뤄두고 있다가,이번에 “어차피 언젠간 써야 할 거면 제대로 한번 파보자”는 생각으로Zustand의 동작 방식과 리렌더링 구조를 중심으로 정리해보기로 했다. 📦 Zustand에서 불필요한 리렌더링 줄이기Zustand를 사용하면 컴포넌트..

헷갈리기만 하던 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 ..

🧠 React, 왜 공식 문서로 돌아왔는가React를 학습해오면서 강의나 실습만으로는 한계가 있다는 걸 뼈저리게 느꼈다.점점 복잡해지는 컴포넌트 구조와 상태 관리 흐름 속에서, "왜 이렇게 되는지"에 대한 본질적인 이해 없이 따라치기만 하고 있었다.그래서 더 이상 ‘흉내내기’로는 부족하다고 판단했다. React를 근본부터 이해하고, 실전에서 스스로 판단할 수 있는 힘을 기르기 위해 React 공식 문서를 처음부터 끝까지 읽고 정리하는 작업을 시작했다. 이 기록은 단순한 요약이 아닌, 공식 문서를 읽으며 직접 코드를 작성하고, 문제를 풀어보며 겪은 시행착오와 이해 과정을 담은 실전 기반 학습 기록이다. 🧩 리액트 컴포넌트, 제대로 정의해보기React 공식 문서에서 다루는 컴포넌트 정의 방법을 바탕으로컴..

✨ 리액트 페이지 라우팅이란? ✨페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링하는 과정이다.예를 들어 /new 경로로 이동하면 New 페이지가 렌더링되는 방식이다. 🏡➡️📄🔍 페이지 라우팅의 원리웹 서버는 사용자에게 제공해야 하는 HTML 파일을 가지고 있다. 브라우저에서 /blog 같은 특정 페이지를 요청하면 서버는 해당 페이지를 그대로 반환하여 렌더링하게 된다.이 방식은 MPA (Multi-Page Application) 라고 하며, 전통적인 방식으로 많은 서비스에서 사용되어 왔다. 🏛️📜🏗️ 멀티 사이드 렌더링(MPA)와 서버 사이드 렌더링(SSR)멀티 사이드 렌더링 (MPA, Multi-Page Application)서버가 여러 개의 개별적인 페이지를 보유하고 있음각 페이지 이동..