⭐️CSS 📌z-index와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명해주세요 z-index는 요소들의 쌓이는 우선순위를 결정하는 CSS 속성이며, position 속성 값이 static이 아닌 요소에만 영향을 미치고 z-index 값이 높을수록 요소는 위에 위치하게 됩니다 스택 컨텍스트는 요소들이 쌓이는 방식을 나타내며, 레이어를 포함하는 요소입니다 자식 요소의 z-index 값은 해당 요소를 기준으로 설정되며, 해당 컨텍스트 밖의 요소는 그 사이의 레이어에 올 수 없습니다. 예를들어 요소 B가 요소 A 위에 있을 때, 요소 A의 하위 요소 C는 요소 B보다 위에 올 수 없습니다. 그러나, 요소 B가 스택 컨텍스트를 형성하면, 요소 B 내부에서 다시 새로운 스택 컨텍스트가 ..

🧩짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있는 경우가 있는데 이때 useDeferredValue& useTransition 사용하여 보완을 할수 있다 useTransition useTransition 특정 상태 업데이트의 우선 순위가 낮음을 알리는 데 사용할 수 있다 React state를 업데이트할 때 트랜지션을 추가하여 상태 업데이트를 부드럽게 처리하게 도와준다 사용자가 화면을 스크롤하거나, 페이지를 이동할 때 사용된다 사용자가 다음 페이지를 클릭하면, 새로운 페이지가 로드되기 전에 기존 페이지 전환을 부드럽게 만들어준다 => 다른 모든 상태 업데이트 또는 UI 렌더링 트리거의 우선순위가 더 높음 비동기 작업을 시작하는 시점에서 일시적으로 UI를 지연시켜 로딩 중임을..

Ref와 DOM Ref는 render메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다, ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다 => 함수 컴포넌트는 인스턴스가 없기 때문에 부모 컴포넌트에서 forwardRef 함수를 사용하여 자식 컴포넌트로 ref를 전달할 수 있다 react.forwardRef 렌더링에 사용될 함수를 일자로 받고 React는 이 함수를 props와 ref을 사용하여 호출 함수는 React 노드를 반환한다 컴포넌트에 forwardRef()라는 함수를 적용 import React, { forwardRef } from 'r..

Object 생성자 함수 새로운 객체를 생성할 때 사용된다 빈 객체 생성 var obj = new Object(); 객체 리터럴과 유사한 형태로 객체 생성 var obj = new Object({ name: 'John', age: 25 }); 다른 객체를 복사하여 새로운 객체생성 var oldObj = { name: 'John', age: 25 }; var newObj = new Object(oldObj); ⇒객체 리터럴을 사용하여 객체를 생성하는 것이 더 간편하고 직관적 생성자함수 자바스크립트에서 객체를 생성하기 위해 사용되는 함수 생성자 함수는 일반 함수와 동일한 방식으로 정의되지만, 객체를 생성할 때 new 연산자를 사용하여 호출 새로운 빈 객체를 생성 이 빈 객체의 프로토타입을 생성자 함수의 프로..