SPA (Single Page Application)이란?HTML은 하나고, JS가 화면을 바꿔가며 앱처럼 동작하는 웹.SPA의 핵심 특징서버에서 HTML을 한 번만 받음이후 화면 전환은 JS가 처리페이지 이동 시 새 HTML 요청 없음깜빡임 없음, 빠름REACT는 SPA를 만듦index.html 파일 하나 사용JS로 화면 구성React SPA 실제 동작 흐름최초 요청GET /서버 응답:화면에는 아무것도 없음JS 실행ReactDOM.createRoot(root).render()JS가 실행되면서 컴포넌트 생성화면 채움페이지 이동/home → /aboutHTML 요청하지 않음JS가 컴포넌트 교체URL만 변경 (History API)SPA가 SEO에 약한 이유검색엔진(SEO)은 기본적으로 HTML만 봄검색엔진..

클로저란 무엇인가?함수가 “자기가 태어난 렉시컬 환경(스코프)”를 기억해서 함수 실행이 끝난 뒤에도 그 변수를 계속 사용하는 것렉시컬 환경이란?환경 레코드(Environment Record)모든 지역 변수를 프로퍼티로 저장하고 있는 객체this 값과 같은 기타 정보도 여기에 저장외부 렉시컬 환경(Outer Lexical Environment) 에 대한 참조 – 외부 코드와 연관됨Lexical Environment{ Environment Record: { 변수들 } Outer Environment Reference: 바깥 환경}함수는 자기 몸체가 정의된 위치 기준으로 환경을 기억함이 정보가 함수의 내부 슬롯 [[Environment]]에 저장됨클로저 예시 함수function makeCounter() {..

기준 1 — “이 상태는 누구의 것인가?”특정 컴포넌트의 상태면 → propsprop drilling 발생해도 OK이 컴포넌트 없으면이 상태도 의미가 없다예:input value//SearchBox가 없으면 button은 다른 곳에서 쓸 이유가 없음 function SearchBox() { const [value, setValue] = useState(""); return ;}모달 open/close탭 선택 상태드롭다운 열림 여부여러 곳에서 ‘공통 규칙’으로 쓰이면 → store이 상태는"UI 하나"의 문제가 아니라"앱의 규칙"이다예:현재 scene / eventglobal mute네트워크 연결 상태로그인 유저기준 2 — “누가 이 상태를 바꾸는가?”props가 맞는 경우부모가 관리자식은 요청만 함 ..

공식 문서 경로 빠르게 시작하기 – 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..