📖 용어사전

가상 DOM

실제 DOM 변경을 줄이기 위해 화면 변화를 비교하는 구조

라우트 가드

페이지 진입 전 로그인이나 권한을 검사하는 로직

코드 스플리팅

필요한 코드만 나눠 불러오는 최적화 방식

레이지 로딩

처음부터 전부 불러오지 않고 필요할 때 자원을 불러오는 방식

트리 셰이킹

사용하지 않는 코드를 빌드 결과에서 제거하는 최적화

폴리필

오래된 브라우저에 없는 최신 웹 기능을 대신 구현하는 코드

웹 컴포넌트

브라우저 표준으로 재사용 가능한 사용자 정의 요소를 만드는 기술

Shadow DOM

컴포넌트 내부 DOM과 스타일을 바깥과 분리하는 기능

CSS-in-JS

JavaScript 코드 안에서 컴포넌트 스타일을 작성하는 방식

디자인 시스템

색상·폰트·컴포넌트·규칙을 통일해 관리하는 체계

스토리북

UI 컴포넌트를 독립적으로 개발하고 문서화하는 도구

상태 끌어올리기

공유 상태를 공통 부모에서 관리하는 패턴

양방향 바인딩

화면 입력값과 프로그램 상태가 서로 자동 동기화되는 방식

단방향 데이터 흐름

데이터가 정해진 한 방향으로 전달되는 설계 방식

컴포지션

작은 컴포넌트를 조합해 복잡한 화면을 만드는 방식

뷰포트

브라우저에서 현재 사용자에게 보이는 화면 영역

브레이크포인트

화면 크기에 따라 레이아웃을 바꾸는 기준 폭

스켈레톤 UI

데이터 로딩 중 실제 화면 모양을 미리 보여주는 UI

토스트

작업 성공·실패 등을 잠깐 나타냈다가 사라지는 알림 UI

모달

현재 화면 위에 겹쳐 사용자 입력이나 확인을 받는 팝업형 UI

React

컴포넌트 기반 UI를 만들기 위한 JavaScript 라이브러리

JSX

JavaScript 안에서 HTML과 비슷한 문법으로 UI를 작성하는 방식

Hook

React 함수 컴포넌트에서 상태와 생명주기 기능을 사용하는 함수

useState

React 컴포넌트의 상태값을 만들고 변경하는 Hook

useEffect

렌더링 이후 API 호출 등 부수효과를 처리하는 Hook

useMemo

계산 결과를 재사용해 불필요한 계산을 줄이는 Hook

useCallback

함수 객체를 재사용해 불필요한 재생성을 줄이는 Hook

Context API

여러 컴포넌트에 공통 데이터를 전달하기 위한 React 기능

React Router

React SPA에서 URL별 화면 전환을 관리하는 라이브러리

key prop

React가 목록 항목을 구분하도록 주는 고유값