나디아 성장 일기

📌 리액트 컴포넌트 순수성 리액트 컴포넌트는 순수해야 한다순수 함수와 부수 효과의 분리해야 한다. (= 계산과 액션 분리)컴포넌트 내부에 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: 요소의..

📌 DOM(실제 문서 객체 모델) : HTML 코드를 웹 브라우저가 해석해서 생성한 객체 모델 🟰 HTML markup 상속되는 조상이 많아서 복잡하다. 👉 유지보수 비용 많이 듬// 부모(상위) 요소const figureElement = document.createElement('figure');// 자식(하위) 요소const figcaptionElement = document.createElement('figcaption');// 요소 간 관계 형성figureElement.append(figcaptionElement);// figure 객체의 children에 figcation이 생김console.dir(figureElement); // figure 객체// 렌더링const actualDomEl..

✏️ 리액트 전 자바스크립트 복습   1. 변수 스코프 [JS] 블록 스코프(Block Scope) / 실행 컨텍스트(Execution Context)블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌tensdiary.tistory.com   2. 템플릿 리터럴(Template literal) [JS] 템플릿 리터럴(Template literal)템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(..

📌 context : 컴포넌트 간의 데이터를 전달할 수 있는 기능 데이터 보관소(객체) 역할 props의 단점인 부모 👉 자식으로만 데이터를 전달하는 것을 해결한다. ✨ Props Drilling : 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것 context는 여러 개 / 분리하여 설정할 수 있다. 📌 context 생성하기 📍 context 생성 메서드 불러오기 import { createContext } from 'react' 📍 context 선언하기 const 변수명 = createContext(); 컴포넌트 외부에 선언 👉 굳이 App 컴포넌트가 리렌더링 될 때마다 재생성 될 필요가 없기 때문 📍 컴포넌트 감싸기 Provider 컴포넌트 ..

📌 useCallback : 불필요한 함수의 재생성 방지 객체 타입을 최적화 하는 방법 리렌더링 되더라도 다시 생성되지 않게 방지하는 기능 📌 useCallback 사용하기 📍 useCallback 불러오기 import { useState, useRef, useReducer, useCallback} from 'react' 📍useCallback 구조 useCallback( function, [deps] ) function: 최적화 할 함수 (재생성을 방지할 함수) deps: 최적화 기준이 될 배열 deps를 빈 배열로 놔둠 👉 Mount(탄생) 될 때에만 함수 생성, 그 뒤로는 생성 X function을 그대로 생성해서 반환해준다. deps가 변경되었을 때만 최적화 한다. // CREATE (일정 추가 ..

📌 memo : 컴포넌트를 인수로 받아 최적화된 컴포넌트로 만들어 반환 React의 내장 함수 얕은 복사 ('==='로 비교, 주소값 X) 최적화된 컴포넌트는 props를 기준으로 메모이제이션 된다. 메모이즈드 컴포넌트(Memoized Componenet, 최적화된 컴포넌트)는 부모 컴포넌트가 리렌더링 되더라도, 자신이 받는 props가 바뀌지 않으면 다시는 리렌더링이 실행되지 않도록 함 👉 불필요한 리렌더링 방지 ✨ 고차 컴포넌트(HOC, Higher Order Component) : 컴포넌트를 인수로 받아 해당 컴포넌트에 추가적인 기능(최적화, 메모이제이션)을 덧붙여 새로운 컴포넌트를 반환해주는 컴포넌트 📌 memo 사용하기 📍 memo 불러오기 import { memo } from "react"; ..