나디아 성장 일기

📌 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..

: 머리글, 줄임말title 속성을 통해 부가 설명"abbreviation(약어)"  사용 태그로 약어를 감싼다.title 속성에 약어의 의미를 명시한다.See the Pen abbr by nadia kwon (@nadia-kwon) on CodePen.   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.m..

📌 컴포넌트 테스트  ✅ 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 './..

📌 scrollIntoViewelement.scrollIntoView(alignToTop, {scrollIntoViewOptions}); : 호출 된 요소가 화면에 보이도록 스크롤   ⏩ alignToTop: boolean 값true: 요소의 상단으로 스크롤`scrollIntoViewOptions: {block: "start", inline: "nearest"}`와 일치기본 값false: 요소의 하단으로 스크롤`scrollIntoViewOptions: {block: "end", inline: "nearest"}`와 일치  ⏩ scrollIntoViewOptions: 속성을 포함하는 객체behavior: 애니메이션 적용 "auto": 스크롤이 계산된 값에 의해 결정"smooth": 부드럽게 애니메이션을 ..

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

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