나디아 성장 일기

📌 React 렌더링 과정 및 상태 관리    1️⃣ 렌더링 트리거 👉 첫 주문컴포넌트의 초기 렌더링인 경우(애플리케이션 처음 로드)컴포넌트의 state가 업데이트 된 경우(set함수)=> React는 컴포넌트를 렌더링하여 초기 UI를 생성한다.  이 단계에서 UI는 가상 DOM에 생성된다.   2️⃣ Real DOM 반영 👉 첫 서빙(음식 첫 제공)생성된 UI는 가상 DOM에서 실제 DOM에 반영된다.   3️⃣ 상태 관리 👉 컴플레인(추가 주문) 관리사용자가 애플리케이션의 상태를 변경하거나(상호작용) 컴포넌트의 props가 바뀌면, 상태가 업데이트한다.상태 변화는 애플리케이션의 UI에 영향을 미치기 때문에 적절히 관리되어야 한다.   4️⃣ 컴포넌트 렌더링(ReactDOM으로 리렌더링) 👉 ..

📌 HTML  vs  React JSX  HTMLJSX태그 class  className forhtmlFor valuevalue,  defaultValuecheckedchecked,  defaultChecked 태그style 속성에 문자열 style 속성에 {객체}    ℹ️ 태그의 className ✅ HTML ➡︎ class 사용Hello World  ☑️ JSX ➡︎ className 사용Hello World   ℹ️  태그의 htmlFor ✅ HTML ➡︎ for 사용Username:  ☑️ JSX ➡︎ htmlFor 사용Username:   ℹ️  태그의 defaultValue ✅ HTML ➡︎ value 사용  ☑️ JSX ➡︎ value,  defaultValue 사용value: 값을 동..

📌 useIdconst id = useId() : 접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하는 React Hook 컴포넌트의 최상위에서 호출하여 고유 ID를 생성 고유 ID 문자열을 반환 useId를 리스트의 key를 생성하기 위해 사용하면 안 된다❌import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); // ...  접두사 지정하여 사용하기도 함('my-first-app-', 'my-second-app-')import { createRoot } from 'react-dom/client';import App from './App.js';const root1 = createRoot(..

📌 상태 업데이트(State update)상태는 즉시 업데이트 되지 않는다 (= 스냅샷) 👉 렌더링 시점에서 컴포넌트의 상태 값이 즉시 변경되지 않는다 ❌ 상태(state)를 설정하더라도 기존 렌더링의 변수는 변경되지 않으며, 대신 새로운 렌더링을 요청한다. - 다음 렌더링에 대해서만 변경된다. 상태는 불변 데이터(Immutable Data)로 관리된다. - 리액트에서는 상태, 배열, 객체가 변경되면 안된다. ✨불변 데이터와 가변 데이터불변 데이터: 원시형 타입 (String, Number, Boolean, undefined, null, Symbol)가변 데이터: 객체형 타입 (Function, Array, Object) ✅ 상태 업데이트 과정React가 함수를 다시 호출함수가 새로운 JSX 스냅샷 반환..

📌 React Hook(훅) 사용 규칙 ✅ Hook은 최상위 레벨에서만 호출해야 한다. Hook은 항상 React 함수의 최상위 레벨에서 호출하고, return 이전에 사용해야 한다.  Hook은 React가 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있다. return문, 반복문, 조건문, 이벤트 핸들러, 중첩 함수, try/catch/finally 블록 내부에서 호출 ❌function Counter() { // 함수 컴포넌트의 최상위 레벨에서 사용 const [count, setCount] = useState(0); // ...}function useWindowWidth() { // 커스텀 Hook의 최상위 레벨에서 사용 const [width, setWidth] = useState(w..

✅ 컴포넌트 종류 Stateless Component(Presebtational Component): 표현 목적의 컴포넌트(마크업, 스타일링) Stateful Component(Container Component): 상태가 있는(변경되는) 컴포넌트   ✅ 리액트가 다루는 데이터 타입 1. 컴포넌트 속성(props): 읽기 전용 수정 ❌ 2. 컴포넌트 상태(states): 읽기 / 쓰기 컴포넌트 트리(렌더 트리 A)➡️ 화면 렌더링 컴포넌트 트리(렌더 트리 Z) ➡️ 화면 업데이트 시간의 흐름에 따라 화면 갱신(업데이트)👉 상태(state) 사용  📌 State(상태) : 컴포넌트 내부의 데이터를 기억하는 것     📌 useState : 컴포넌트에 state 변수를 추가할 수 있는 React Hoo..

📌 명령형 프로그래밍(Imperative Programming): 프로세스의 세부 동작을 직접 제어하고 관리하는 방식어떻게 수행해야 하는가(HOW you do something) - 집에 가는 길을 구구절절 설명함(먼저 버스를 타고...) 애플리케이션이 상태를 어떻게 변화시키고, UI를 어떻게 업데이트할지에 대해 직접 지시 웹 API + JavaScript 사용  예제) 체크박스 // 대상 찾기const container = document.getElementById('imperative-programming');const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement; // 타입 단언(Type Asser..

📌 컴포넌트 테스트  ✅ Vitest 설치 및 구성  ⏩ Vitest 패키지 설치pnpm add -D vitest   ⏩ Vitest UI 설치pnpm i -D @vitest/ui   ⏩ test, test:ui 명령 등록 package.json{ "scripts": { "test": "vitest", "test:ui" : "vitest --ui" }}   ⏩ Vitest 사용pnpm vitest   ⏩ 테스트 코드 작성 기능 js 파일과 기능.test.js 파일 생성// sum.jsexport function sum(a, b) { return a + b}// sum.test.jsimport { expect, test } from 'vitest'import { sum } from './..

📌 이벤트(사용자 액션) 처리하기사용자 액션(행동) → UI 업데이트   ✅ 컴포넌트 영역(순수)와 이벤트 영역(부수) ⏩ 컴포넌트 함수 영역사용자가 행동하지 않아도 진행되는 부분렌더링 시점에 함수가 실행이 되는 부분👉 순수 함수 사용⏩ 이벤트 핸들러 함수 영역사용자가 행동을 취해야 진행되는 부분사이드 이펙트(부수 효과)를 위한 최고의 위치렌더링 시점에 함수가 실행되지 않는 부분👉 사이트 이펙트(부수효과) 함수 사용  ex) 프로필 목록 컴포넌트서버에 데이터를 요청해 응답 받아 데이터를 가져와야 한다면 "부수 효과" 응답 받은 데이터를 기반으로 리스트 렌더링 하는 것은 "순수 함수"  📢 컴포넌트 함수 내부의 이벤트 핸들러 함수에서 부수효과를 다루는 이유 👉 렌더링 될 때 이벤트 핸들러 함수가 ..

📌 UI 트리 (Virtual DOM 트리): 리액트는 UI를 ➡ 트리로 모델링한다.   ✅ 렌더 트리 (Real DOM 트리)  : 컴포넌트(노드) 간의 관계 (부모 컴포넌트는 다른 컴포넌트의 자식이 될 수 있다.)Real DOM 트리 브라우저가 화면에 표시할 콘텐츠를 그리기 위해 사용하는 트리 구조 브라우저에서 DOM을 렌더링할 때 생성 컴포넌트만 캡슐화한다.👉 리액트 앱에서 처리    ✅ 모듈 의존성 트리 (Module Dependency Tree): 각 노드의 모듈을 불러와서(import) 형성하는 트리  애플리케이션의 모듈을 어떻게 결합하고 로딩할지(번들할 모듈)를 결정하는 데 사용👉 번들러(Vite, CRA)에서 처리 (리액트에서 처리 X) 코드가 빌드되거나 번들링될 때 생성불러오는 모..