공식 문서 경로 빠르게 시작하기 – ReactThe library for web and native user interfacesko.react.dev내용 정리JSX로 마크업 작성하기JSX란?JSX는 JavaScript를 확장한 문법으로, HTML처럼 보이지만 사실은 React.createElement 호출로 변환됨React 컴포넌트에서 UI 구조를 선언적으로 표현할 수 있음기본 규칙하나의 루트 엘리먼트JSX는 반드시 하나의 루트 태그만 반환해야 함왜?jsx는 html처럼 보이지만 내부적으로는 일반 javascript 객체로 변환됨하나의 함수에서 두 개의 객체를 반환할 수 없음루트가 하나가 아님return ( Title Description);루트가 하나임아래와 같이 태그로 묶어서 반환할 수 있고 ..

React 파이버 아키텍처 분석ReactJSX를 지원하며 virtualDOM을 사용하여 변경된 부분만 DOM 업데이트하는 UI 프레임워크파이버React 16 version부터 불리는 새로운 코어 아키텍처를 채택함기존 스택 기반 알고리즘을 새롭게 작성하고 리팩터링 진행React 복습앨리먼트 렌더링JSX 사용하면 javascript 엔진이 이해할 수 있는 javascript 코드로 변환할 수 있음JSX로 선언된 표현식은 React 앨리먼트라는 객체로 치환됨React 앨리먼트는 ****일반 ****객체임 **(**클래스 ****인스턴스가 아님)단순한 JS 오브젝트일 뿐, new something( )으로 만든 클래스 인스턴스가 아님element instanceof SomeClass 같은 건 성립하지 않음객체이..

공식 문서 경로 빠르게 시작하기 – ReactThe library for web and native user interfaces조건부 렌더링컴포넌트가 조건에 따라 다른 항목을 표시해야 하는 경우 사용조건부로 JSX 반환하는 방법들If / Else 문분기가 명확함JSX 중복 코드가 많아질 수 있음function Item({ name, isPacked }) { if (isPacked) { return {name} ✅; } else { return {name}; }}null 반환특정 조건인 경우 UI에 렌더링이 하지 않을 때 유용함function Item({ name, isPacked }) { if (isPacked) { return null; // 아무것도 출력 안 함 } ret..

useState, useRef, useMemo, useCallback 분석구분useStateuseRefuseMemouseCallback공통점렌더링 간 데이터 유지 (메모리)렌더링발생무시무시무시저장 대상상태(State) 값.current 객체연산 결과 값함수 자체주요 목적상태 관리DOM/비상태 참조값 기반 최적화함수 참조 기반 최적화 어떤 것을 쓸지에 대한 기준 useState값이 바뀌면 화면이 리렌더링 되야함nput 값로딩 상태현재 재생 중인 배속canvas overlay visible 여부useRef값이 바뀌어도 화면은 렌더링이 필요 없음timer idmedia video element reference현재 pointer 좌표throttle / debounce 작업 값websocket 연결 객체useM..

JS Import, Exportexport한 파일에서 정의한 값(변수, 함수, 클래스)을 다른 파일에서 사용할 수 있도록 공개하는 것Named Export여러 개 내보낼 수 있음가져올 때 이름 그대로 써야 함export const PI = 3.14;export function add(a, b) { return a + b;}export class Calculator { multiply(a, b) { return a * b; }}Default Export파일당 하나만 가능이름 없이 내보낼 수 있음가져올 때 이름 마음대로 정할 수 있음export default function User(name) { this.name = name;}여러 값 한꺼번에 내보내기여러 변수/함수를 모아서 export 가능..

부모 상태 변경에도 불필요하게 자식이 다시 렌더링되는 문제를 자동으로 방지함컴포넌트 내부의 비용이 큰 계산 함수 등을 자동으로 캐싱해서 개발자가 직접 useMemo를 쓰지 않아도 되도록 설계됨캐싱되는 예시const cache = _c(1);if (cache[0] === Symbol.for("react.memo_cache_sentinel")) {// 첫 렌더링: JSX 생성 후 캐시에 저장 cache[0] = ( {name} {description} );} else {// 이후 렌더링: 캐시된 JSX를 그대로 재사용}return cache[0];const cache = _c(1);→ 컴파일러가 메모이제이션 슬롯을 하나 준비함.cache[0] === memo_cache_s..