react

왜 굳이 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 ..

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

useState에서 useReducer로 리팩토링하기 🎯 기존 코드: useState 사용React에서 useState를 사용하여 Todo 리스트를 관리할 때, 상태를 직접 업데이트하는 방식으로 구현할 수 있다.const [todos, setTodos] = useState(mockData);각 기능별로 setTodos를 사용하여 새로운 상태를 만들어 반환한다. 하지만 useState를 이용하면 상태 업데이트 로직이 분산되고, 상태 변경이 많아질수록 복잡성이 증가한다.🔥 useReducer 적용useReducer를 사용하면 상태 관리 로직을 하나의 함수(reducer)에 모아 정리할 수 있다. 이를 통해 코드가 더 깔끔해지고, 상태 변경 로직이 분리되어 가독성이 좋아진다.const [todos, dis..

* 기능 구현 준비하기 1. Editor 컴포넌트에 새로운 투두를 입력하고 추가 버튼을 클릭하면 List 컴포넌트에 새로운 투두가 바로 추가되어야 함. 2. 추가된 투두를 List 컴포넌트 내부에서 수정 및 삭제가 가능해야 함. 3. 이미 추가 된 투두가 검색창에서 검색도 가능해야 함.  즉 ,  정리해보자면 다음과 같은 구현이 필요하다. - Todo 추가하기 - Todo 리스트 렌더링 하기- Todo  수정하기 - Todo  삭제하기   본격적인 기능 구현에 앞서, 상태 관리 (State)를 추가해주고 더미 데이터를 만들어 두기로 하자 . 1. React의 useState를 사용하여 Todo 목록을 상태로 관리 const [todos, setTodos] = useState(mockData); 💡 to..

1. Components 구성Header.jsxEditor.jsxList.jsx  본격적인 UI에 들어가기 앞서 Header, Editor, List 컴포넌트들로 구성해주고App.css 스타일을 이용해 중앙으로 배치 시켜줬다. App.css .App { width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap : 10px; } 💡  gap은 display: flex 요소일 경우에만 사용 가능 2. Header 컴포넌트 UI 텍스트와 현재 날짜를 넣어준다.  Header.jsx import "./Header.css";const Header = () => { return ( 오늘은 👀 {new D..