react4 Next.js SSR과 Zustand 사용시 주의점 Next.js는 React 애플리케이션을 구축하기 위한 강력한 프레임워크이며, 서버 사이드 렌더링(SSR) 기능을 통해 성능 및 SEO 이점을 제공합니다. 상태 관리 라이브러리인 Zustand는 간결하고 유연한 API로 많은 개발자에게 사랑받고 있습니다. 하지만 Next.js의 SSR 환경에서 Zustand를 사용할 때는 한 가지 중요한 주의사항이 있습니다. 바로 상태(Store)를 어떻게 관리하고 제공하느냐입니다. 특히 SSR의 특성 때문에 발생하는 문제를 해결하기 위해서는 특정 패턴을 따르는 것이 필수적입니다. 이 글에서는 Next.js SSR에서 Zustand 사용 시 주의해야 할 점과 그 해결책인 Provider 패턴의 중요성에 대해 알아보겠습니다. 1. Zustand란 무엇인가? Zustand.. 2025. 5. 17. MobX는 왜 선택을 받았을까? 최근 노빌더툴에 대한 관심이 많아 관련 기술들을 찾아보던 중, 토스에서 피그마나 Framer를 대체할 자체 디자인 편집기를 만들고 있다는 사실을 알게 되었습니다. 그리고 이 프로젝트의 상태 관리 라이브러리로 MobX를 선택했다는 것을 접했습니다. https://toss.tech/article/firesidechat_frontend_11 토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요! | EP.11토스의 디자인 편집기 데우스(Deus)! 이번 모닥불에서는 토스의 자체 디자인 편집기 데우스(Deus) 프로젝트를 소개합니다! 디자인과 개발 사이의 경계를 넘나드는 새로운 가능성을 만나보세요! 데toss.tech 저는 클라이언트 상태 관리에서 MobX를 사용해 본 경험이 없었습니다. 때문에 이번 기회.. 2025. 5. 15. React의 메모이제이션: cache, memo, useMemo 비교하기 React에서는 성능 최적화를 위한 다양한 메모이제이션 기법을 제공합니다. cache, memo, useMemo는 모두 메모이제이션을 제공하지만, 메모화 대상, 캐시 접근 권한, 캐시 무효화 시점에 차이가 있습니다. 각각의 특성과 사용 사례를 자세히 살펴보겠습니다.useMemouseMemo는 클라이언트 컴포넌트에서 렌더링에 걸쳐 고비용 계산을 캐싱할 때 사용합니다. 컴포넌트 내에서 데이터 변환을 메모화하는 데 적합합니다.'use client';function WeatherReport({record}) { const avgTemp = useMemo(() => calculateAvg(record), record); // ...}function App() { const record = getRecord(.. 2025. 4. 12. 리액트 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. 이전 1 다음
