프론트엔드와 블록체인 
For the next web era!
For the next web era! 최신 글
최근 등록 포스트
Search
웹 개발에서 라우팅(Routing)이란 접속한 URL의 경로(Route)에 대해 빠르게 페이지에 도달하도록 길 안내 하는 것을 뜻하죠. 리믹스(Remix)의 라우팅 시스템은 내부적으로 react-router의 중첩 라우트(Nested routes)를 사용하고 있습니다. 중첩 라우트는 react-router나 next.js를 사용해 보신 분 들이라면 아마 익숙한 개념일텐데요. 이 중첩 라우트를 쉽게 말하자면 어떤 URL에서 중첩되는 경로에 있는 모든 레이아웃 요소를 해당 페이지에서 모두 중첩해서 사용하는 파일 기반의 라우팅 시스템이라고 할 수 있습니다.
리믹스에서는 중첩된 경로에 있는 모든 레이아웃 요소를 해당 라우트 페이지에서 중첩해서 사용합니다. 이를 통해 중복된 UI 개발 코드를 줄이고 페이지 로드 속도를 향상시킬 수 있습니다. 이미지 출저: 리믹스 홈페이지, https://remix.run/
라우트 V1과 V2의 차이점
리믹스 V1에서는 라우트 설정을 폴더 구조를 중첩해서 정의하도록 되어 있었는데요. V2에서는 flat routes 제안 내용을 받아들여 폴더 중첩 없이 파일 이름에서 .으로 중첩을 구분하여 라우트 구조를 정의하도록 변경되었습니다.
V1의 경우…
V1의 라우트는 아래처럼 app/routes/내에 중첩된 폴더 구조 기준으로 라우팅 경로가 정의되는 방식이었습니다.
중첩 라우트(Nested routes)
Remix
2023/09/19 02:59
useDeferredValue()는 useTransition()과 함께 리액트 18버전 이상의 동시성 모드(Concurrent Mode)에서 제공하는 훅으로, 특정 값의 처리 우선순위를 낮추어 렉 현상을 줄여 사용자경험(UX)을 향상시키는 목적으로 사용됩니다.
useTransition()과 차이점이라면 useTransition()은 useCallback()처럼 특정 함수를 마킹하여 처리 우선순위를 낮추지만 useDeferredValue()는 useMemo()처럼 특정 값을 마킹하여 우선순위를 낮추는 식으로 사용합니다.
useMemo(), useCallback()과 같이 앱의 성능을 최적화 하는 용도로 사용되는 훅입니다. 남용해서 사용하는 경우 작업에 불필요한 오버해드가 추가되므로 적절한 경우에만 사용하도록 합시다.
useDeferredValue의 사용
useDeferredValue()는 보통 useState() 훅과 함께 사용합니다. useState()로 생성된 state 값을 인자로 사용하여 상태 업데이트의 처리 우선순위를 낮추고 다른 작업을 동시적으로 처리하도록 허용합니다. 위 코드처럼 useDeferredValue()로 마킹된 state는 상태 업데이트(setState())가 오래 걸리더라도 다른 작업을 지연 시키거나 렉 현상을 발생시키지 않게끔 다른 작업을 먼저 우선해서 처리하도록 합니다. deferred value라는 뜻 그대로, 값 변경이 일어날 때 다른 작업을 우선 처리하도록 해서 지연된 결과 값을 사용하게 되는 것이죠.
useDeferredValue
React Hooks
2023/09/09 22:43
useTransition()은 useDeferredValue()와 함께 리액트 18버전 이상부터 도입된 동시성 모드(Concurrent Mode)에서 제공하는 훅입니다. 여기서 동시성 모드란 리액트가 작업들을 무조건 순차적으로 처리하는 것이 아닌 각 작업의 우선순위를 배분해 동시다발적으로 처리하는 개념입니다. useTransition()을 사용하면 이 동시성 모드의 이점을 살려 특정 작업의 처리 순서를 지연시켜 다른 작업을 먼저 처리하도록 하여 렉과 같은 현상을 줄여 앱의 사용자 경험(UX)를 향상시킬 수 있습니다.
useMemo(), useCallback()과 같이 앱의 성능을 최적화 하는 용도로 사용되는 훅입니다. 남용해서 사용하는 경우 작업에 불필요한 오버해드가 추가되므로 적절한 경우에만 사용하도록 합시다.
useTransition의 사용
첫번째로 현재 처리 중인지 여부를 알려주는 isPending 플래그를 반환합니다. 처리 중이 아닐 때의 기본 값은 false 입니다.
두번째로 상태 변경의 처리 우선순위를 지연하도록 마크 할 수 있는 startTransition()을 반환합니다. 마크된 상태 변경 함수는 아직 처리 중인 상태일 때 isPending 플래그가 true가 됩니다.
useTransition
React Hooks
2023/09/09 13:03
useCallback()은 이전 편의 useMemo()와 함께 리액트 앱의 최적화를 위해 사용하는 리액트 Hook입니다. 특정 값이나 컴포넌트를 메모이제이션 하는 useMemo()와 달리, useCallback()은 함수를 메모이제이션(memoization)할 때 사용합니다.
리액트 컴포넌트는 리랜더링을 하게 되면 내부의 모든 것들을 다시 생성합니다. 이 때 컴포넌트 내부에 정의된 함수들도 함께 다시 생성됩니다. useCallback()을 사용하면 컴포넌트가 리랜더링하더라도 함수를 다시 생성하지 않고, 기존 함수를 메모이제이션해두고 그대로 불러와서 사용하도록 할 수 있습니다.
useMemo()와 마찬가지로 useCallback() 또한 무분별한 사용은 오히려 앱 성능을 저하시킵니다. 메모이제이션하는 것도 컴퓨팅 비용이 드는 작업이므로 적절한 경우에만 useCallback()을 사용하는 것이 앱 성능 향상에 도움이 됩니다.
useCallback 사용
useCallback
React Hooks
2022/11/24 11:53
useMemo() 리액트 Hook은 useCallback()과 함께 리액트 앱의 최적화를 위해 사용합니다. 리액트 컴포넌트는 props나 상태(state)가 변경될 때마다 매번 리랜더링을 수행하고 변경된 값을 화면에 반영합니다. 리랜더링하는 과정에서 이전에 계산했던 값들을 모두 다시 계산하게 되는데, 이 때 계산 결과가 같기 때문에 굳이 재 계산하지 않아도 되는 경우가 생길 수 있겠죠.
이런 상황이라면 useMemo()를 사용해 컴포넌트가 불필요한 재 계산 작업을 수행하지 않고 기존 계산된 값을 캐시(cache)해 뒀다가 사용하는 메모이제이션(memoization) 처리를 할 수 있습니다. 메모이제이션된 값은 특정한 경우가 아니라면 재 계산을 수행하지 않고 캐시된 값을 바로 사용하기 때문에 불필요한 연산 수행을 방지합니다.
useMemo()를 사용해서 메모이제이션하는 것도 컴퓨팅 비용이 드는 작업이므로 남용하게 되면 오히려 앱 성능이 저하됩니다. 랜더링 과정에서 메모이제이션 비용보다 더 높은 고비용의 연산을 수행하는 값이 있을 경우에만 적절하게 사용해야 합니다.
useMemo 사용
useMemo()는 아래 형태로 사용합니다.
useMemo
React Hooks
2022/11/06 09:27
Load more
Series
React
Search
SSR
Search
Remix
2
Next
0
Web3
Search
More…
DB