🧩짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있는 경우가 있는데 이때 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..

리액트 쿼리를 쓰면 좋다고 해서 공부하려고 하는데 아직 개념이 덜 잡힌거 같다 🥲 React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. =>기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어 해결하기 위해 React-Query가 만들어졌다. React-Query 장점 서버사이드 상태 관리와 관련된 여러 가지 반복적인 작업들을 손쉽게 처리할 수 있다 데이터뿐만 아니라 isIdle, isLoading, isFetching, isSuccess, isError..

리액트의 모든 컴포넌트들은 라이프사이클이 존재하는데 그거에 대해 크게생각해 본적도 없지만 기술면접때 중요할꺼 같아 정리하려고 한다 🥲 리액트의 라이프사이클은 크게 4가지로 설명할 수 있다. 최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와 초기에 화면을 그려줄 때와, 업데이트가 될 때 호출되는 render() 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할이다 Mounting 컴포넌트가 처음 실행될 때 Mount라고 한다 컴포넌트가 시작되면 context, deflautProps와 state를 저장 => ..