react2 리액트 19의 cache() API 제대로 쓰기 리액트 19에 새로운 cache() API가 도입되었습니다, 이는 React Server Components(RSC)에서 데이터 페칭과 계산 결과를 캐싱하는 데 사용됩니다. 각 렌더링 시 데이터 페칭 결과를 캐싱(메모이제이션) 할 수 있게 하며, 동일한 데이터를 여러 컴포넌트에서 페칭 할 때 데이터 결합도를 줄이는데 유용합니다. 1. 기본적인 사용법컴포넌트 외부에서 `cache`를 호출해 캐싱기능을 가진 함수를 만들 수 있습니다.(컴포넌트 내부에서 감쌀 경우 렌더링마다 새 함수가 생성된다.)import {cache} from 'react';import calculateMetrics from 'lib/metrics';const getMetrics = cache(calculateMetrics);functi.. 2025. 4. 11. [NEXT.JS] Warning : Props 'className' did not match와 suppressHydarationWarning 이런 에러가 발생했다. 위 에러는 처음 페이지 SSR로 내려준 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시 + 클래스명과 이후 클라이언트에서 작동하는 해시 + 클래스 명이 달라지면서 스타일을 불러올 수 없는 문제를 발생한다. 구글링 해보니까 보통 styled component에서 많이 발생하는 에러인 것 같다. 그러나 나는 tailwind를 사용하고 있었다. 에러를 자세히 보니 dark가 있었고 이것은 다크모드 설정에서 발생된 에러같았다. 나의 다크모드에는 세가지 종류가 있는데 Light, Dark, System 이 있는데. 서버에서는 localStorage에 저장된 나의 테마상태를 모르기때문에 발생되는 에러다. 리액트 공식문서에 있는 suppressHydrationWarning으로.. 2023. 7. 11. 이전 1 다음
