프론트엔드와 블록체인 
For the next web era!
For the next web era! 최신 글
최근 등록 포스트
Search
리믹스(Remix)와 같은 서버 사이드 렌더링(SSR) 프레임워크로 개발할 때, 기존의 클라이언트 사이드 렌더링(CSR) 방식과 가장 큰 차이점은 초기 화면에 필요한 데이터를 다루는 방식입니다. SSR에서는 데이터베이스 조회나 API 응답으로 얻는 서버 데이터에 대한 접근과 처리가 화면의 서버 렌더링 시점에 미리 이루어질 수 있다는 점이 핵심입니다.
서버 사이드 렌더링(SSR)에서 웹 페이지가 만들어지는 과정을 다시 생각해 봅시다. 먼저, 서버에서 웹 페이지를 만들고 이를 브라우저로 보냅니다. 그 다음, 브라우저에서 페이지를 보여줍니다. 이 방식은 사용자가 웹사이트를 더 빨리 볼 수 있게 해줍니다.
리액트는 이런 SSR을 지원하기 위해 “하이드레이션”이라는 기능을 사용합니다. 이 기능은 무엇을 할까요? 서버에서 만든 페이지와 브라우저에서 만든 페이지를 비교합니다. 만약 두 페이지가 다르다면, 리액트는 오류나 경고 메시지를 보여줍니다. 이렇게 해서 페이지가 올바르게 표시되는지 확인합니다.
SSR의 초기 페이지 로딩 속도라는 장점을 최대한 활용하고 하이드레이션 과정에서 발생할 수 있는 문제를 방지하려면, 서버 렌더링과 클라이언트 렌더링 시점에서 동일한 데이터를 사용하는 것이 가장 좋습니다. 물론 클라이언트 렌더링 이후 useEffect()와 같은 훅을 사용해 API로 추가 데이터를 호출하여 화면을 구성할 수 있습니다. 하지만 이 방식은 화면 요소들이 움직이는 레이아웃 시프트 현상을 유발해 사용자 경험(UX)에 부정적인 영향을 미칠 수 있습니다.
클라이언트 렌더링때 데이터 조회를 통한 추가 화면 요소 생성은 CLS(Cumulative Layout Shift)를 증가시킵니다.
리믹스의 loader() 모듈 함수를 사용하면 서버와 클라이언트 렌더링 시점에 관계없이 필요한 데이터를 일관되게 사용할 수 있습니다. 이를 통해 서버 사이드에서 준비된 데이터로 레이아웃 시프트 없는 완성된 페이지를 브라우저에서 즉시 볼 수 있습니다.
loader 활용하기
Remix
2024/11/14 23:12
웹 개발에서 라우팅(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
Load more
Series
React
Search
SSR
Search
Remix
3
Next
0
Web3
Search
More…
DB