React 19 업데이트 요소 정리Activity 컴포넌트기존 화면에 State 소멸되는 이유사이드 바 열고 닫으면 사용자 검색어 유지 안되는 문제스크롤 위치동영상, 오디오 재생 위치기존 state 유지방법css로 숨김 (visible, hidden)사이드 바 상태를 부모 컴포넌트로 끌어올려서 관리하기결합도 높아짐기존 방식 사용 시, state 사라지는 이유컴포넌트가 사라지는 경우 보통 조건부 렌더링 때문DOM 트리에서 완전히 제거되어 사용자 모든 상태가 소멸됨Activity 컴포넌트 유지 방법조건부 렌더링 대신, mode prop을 사용해 가시성 제어함자식 컴포넌트를 DOM에서 제거하지 않고 시각적으로 숨기고 렌더링 작업을 일시 중단 (suspend)시킴hidden 상태에서는 불필요한 리렌더링이 발생하..

Event Loop이벤트 루프란?자바스크립트 엔진과 브라우저 환경이 협력하여 비동기 작업들을 올바른 순서로 실행하도록 관리하는 조정자이벤트 루프를 쓰는 이유는?싱글 스레드인 자바스크립트의 작업을 멀티 스레드로 돌려 작업을 동시에 처리시키게 하던가, 또는 여러 작업 중 어떤 작업을 우선으로 동작시킬 것인지 결정하는 세심한 컨트롤을 하기 위해 존재하는 것자바스크립트는 한 번에 하나의 일만 하는 싱글 스레드인데 우리는 웹브라우저에서 많은 일이 동시에 일어나길 바람비동기로 동작하는 핵심 요소는 자바스크립트가 아닌, 브라우저의 역할버튼 클릭네트워크 요청타이머(setTimeout)화면 애니메이션Event Loop - 구성 요소콜스택현재 실행 중인 동기 함수들이 쌓이는 곳스택이 비워질 때까지 다음 단계로 넘어가지 않..

상호작용성 더하기State란?시간에 따라 변화하는 데이터어떠한 컴포넌트에든 추가 & 업데이트할 수 있음이벤트에 응답하기React는 JSX에 이벤트 헨들러 추가 가능이벤트 핸들러란?클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수handle로 시작하고 그 뒤에 이벤트명을 붙인 함수명을 가짐이벤트 핸들러로 함수 전달할 때 주의 사항 alert('...')}> -> react가 함수를 전달받으면, 기억하고 있다가 사용자가 상호작용 시 호출해줌 -> 사용자 상호작용이 없어도 바로 함수 실행되어 버림이벤트 핸들러 내에서 Prop 읽는 방법컴포넌트 내부에서 선언되기에 해당 컴포넌트 prop에 접근 가능함각 부모 컴포넌트에서 정의한 이벤트 핸들러 함수를 자식 컴포넌트의 ..