재안 IT 공부 일기장

[React] useTransition, Concurrent Mode 쉽게 이해하기

개요[1] useTransition[2] concurrent mode[3] useTransition Details[4] reference [1] useTransition useTransitoin이란?  리액트 18에 추가된 훅으로 nonblocking 방식으로 상태(state)를 업데이트할 수 있게 해준다. nonblocking이란?  기존 리액트의 동기적 업데이트 방식에서는 상태가 업데이트되면 그에 따른 렌더링 작업이 바로 실행되는데, 해당 작업이 실행될 때, 사용자의 인터랙션이 발생하면 해당 인터렉션 처리가 지연된다. (blocking)   이때, useTransition의 startTransition을 통해 특정 상태 업데이트를 낮은 우선순위로 예약해 사용자 인터랙션을 우선 순위로 처리하게 된다. ..

[React] useOptimistic 쉽게 이해하기

개요[1] useOptimistic[2] reference [1] useOptimistic useOptimistic이란?  리액트 19 부터 지원하는 훅으로 optimistic update를 쉽게 구현할 수 있도록 해준다. 사용시 Concurrent Mode가 적용되서 nonblocking 방식으로 상태를 업데이트할 수 있다. optimistic update란,  비동기 통신과 같은 대기 상황이 발생했을 때, 결과를 기다리지 않고 기대되는 결과를 미리 UI에 반영하는 기법이다. 실제 결과와 기대된 결과가 다르다면, 롤백과 같은 상황에 맞는 조취를 하면 된다. const [optimisticValue, update] = useOptimistic( state, // updateFn (curr..

최근에 React Compiler가 생겼다고 해서 관심을 갖고 있었다.React Compiler에 대해 간략하게 설명하자면, 그동안 불필요한 리렌더링을 방지하려면 useMemo와 useCallback을 통해컴포넌트의 props를 관리 했어야 하는데React Compiler는 위의 조취를 자동으로 지원한다고 한다. 😲 그러다가 유튜브 알고리즘으로 React Conf 2024 Day1이 떴다. 새로나올 React 19의 기능에 대해 설명하는 conference라서 영상에선 React 19에 나오게될 기능들에 대해 설명한다.궁금해서 봤고, 보면서 간단하게 정리를 하려고 한다. https://www.youtube.com/watch?v=T8TZQ6k4SLE 영상이 워낙 길어서 조금씩 나눠서 글을 수정하며 정리하..

Custom Hooks 1 아래와 같이 리액트 hook에 로직들을 추가해서 만든 함수가 커스텀 hook이다. 다른 함수처럼 reusing logic이 핵심이고 간단한 커스텀 hook 예시는 아래와 같다. 함수 이름에 use를 붙여야지 리액트가 해당 함수가 hook임을 인지해 내부에서 리액트 hooks가 사용 가능하게 된다. 아니면 안돌아간다. 파일이름은 상관 없다. 또한, 해당 hook이 hook 사용 규칙을 위반했을 때 경고가 뜬다. Hook 사용 규칙 1. 반복문, 조건문, 내부함수에서 호출하지 말 것 2. React 컴포넌트 내부에서만 호출할 것 커스텀 hook의 사용은 함수처럼 다른 컴포넌트에서 그냥 가져다 쓰면 된다. 이때 커스텀 hook에서 state를 생성한다고해서 해당 훅을 사용하는 모든 ..

React.memostate 변경으로 인해 부모 컴포넌트가 재실행 될경우 해당 컴포넌트의 모든 하위 컴포넌트가 DOM 변경과 관련없이 재실행된다. (console.log로 확인 가능)이때 하위 컴포넌트들의 필요없는재실행을 막기위해 React.memo를 사용할 수 있다. 아래와 같이 export할 때 감싸주면 된다.  React.memo는 함수형 컴포넌트에서만 사용할 수 있고해당 컴포넌트에게 넘어오는 props를 확인해 props의 값 변경이 없다면 ( === 사용 )ReactDOM은 해당 컴포넌트를 재실행 하지 않는다. 이처럼 React.memo는 최적화를 위해 사용하는데 남용하면 오히려 비용이 더 많이 들게된다.이는 App 컴포넌트가 변경될 때마다 해당 컴포넌트 기존 props와 새로운 props의 값..