나디아 성장 일기

✅ 컴포넌트 종류 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) 코드가 빌드되거나 번들링될 때 생성불러오는 모..

📌 리액트 컴포넌트 순수성 리액트 컴포넌트는 순수해야 한다순수 함수와 부수 효과의 분리해야 한다. (= 계산과 액션 분리)컴포넌트 내부에 Side Effects 로직이 포함되서는 안된다.    ✅ 순수 함수 (Pure function) : 입력이 동일할 경우, 결과도 동일한 함수 같은 입력이 주어졌다면, 같은 결과를 반환해야 한다. 👉 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않는다. 일정한 결과가 필요할 때 사용(마크업 렌더링 등) 부수 효과 ❌계산 (동일 입력 → 동일 출력)결과 예측 가능 ➡ 에러를 줄인다⏬function sumPure(x, y, z) { return x + y + z;}console.log(1, 2, 3); // 6console.log(1, 2, 3); /..

📌 컴포넌트 속성 타입 검사(Prop Types Validation) 컴포넌트는 정확한 마크업을 위해 외부로부터 전달받은 데이터인 속성(props)의 타입을 지정해야 한다. 1. 타입 스크립트 파일을 생성하여 타입 검사를 하나로 모아둔다.// type.d.jsimport { oneOf, arrayOf, exact, string } from 'prop-types';import { IMAGE_TYPES, statusMessages } from '../data/learn';export const StatusMessagesType = arrayOf(oneOf(statusMessages));export const ImagesType = oneOf(IMAGE_TYPES);export const ItemType =..

📌 React 설치 ✅ CDN 방식  ✅ ESM 방식import React from 'https://esm.sh/react';import ReactDOM from 'https://esm.sh/react-dom';  📌 React && Vite 설치확장자Web 표준에서는 확장자 필수(.js, .jsx 등)Vite는 확장자 필요 X 📍 Vite 오토 스캐폴딩pnpm create vite@버전 pnpm create vite@latest --template react- 타입 스크립트를 사용하는 템플릿을 해당 폴더에 만드는 명령어pnpm create vite@latest (learning-react) -t reat-ts   ✨ 배포할 땐 배포용 모듈을, 개발할 땐 개발용 모듈을 사용해야 함    ✨ reac..

📌 React 컴포넌트 : 사용자 인터페이스(UI)를 구성하는 부품 재사용 매커니즘(클래스 또는 함수)를 사용하여 리액트 요소를 반환하는 것 컴포넌트 명웹 컴포넌트: 케밥 케이스(kebab-case) 리액트 컴포넌트: 파스칼 케이스(CamelCase)    ✅ 컴포넌트 속성(Props) : 컴포넌트에 전달되는 입력값 props는 항상 객체, 읽기 전용컴포넌트를 다양하게 재사용 할 수 있게 한다. 컴포넌트에 전달된 속성에 따라 마크업을 동적으로 생성 가능 함수형 컴포넌트 props props를 매개변수와 인자로 받음function Greeting(props) { return Hello, {props.name}!;}  클래스형 컴포넌트 props props를 this로 접근class NumberList ..

📌 React : React 애플리케이션을 정의하고 구성하는 데 필요한 주요 기능과 API를 제공 React  컴포넌트 정의 React 의 핵심 기능(상태 관리, 생명주기 메서드 및 Context API) 제공 JSX와 컴포넌트의 선언 처리    📌 React DOM : React 애플리케이션을 실제 DOM에 렌더링하는 데 필요한 기능을 제공 브라우저의 DOM과 상호작용을 담당 DOM에 변경 사항을 적용      ✅ React.createElement() : React 요소 생성 createElement(type, props, ...children)- type: 생성할 요소의 타입(HTML 태그 이름, 컴포넌트 등)- props: 요소에 대한 속성(properties) - children: 요소의..