2025/03/29 2

[React] Zustand쓰면 Redux 이제 못 씀, Zustand 파헤치기

React는 여러 개의 컴포넌트로 구성되어 웹 페이지를 만든다.이렇게 컴포넌트를 나누다 보면, 컴포넌트 간에 상태(변수)를 공유해야 하는 상황이 자주 발생하는데,이때 보통 props, Context API, 혹은 Redux와 같은 상태 관리 도구를 사용한다. 그중 Redux는 가장 널리 알려진 상태 관리 라이브러리로, 전역 상태를 정의하고 이를 여러 컴포넌트에서 공유할 수 있게 해준다.하지만 Redux는 초기 설정이 복잡하고, 문법이 다소 어렵다는 단점이 있다. 그래서 최근에는 Redux와 비슷한 기능을 제공하면서도, 더 간단하고 직관적인 API를 가진 상태 관리 도구들이 많이 사용된다.그 중 하나가 바로 Zustand이다. 이번 글에서는 Redux와 비슷한 기능을 제공하면서도 훨씬 사용하기 쉬운 Zus..

[React] 사용자에게 빠른 UI 반응을 제공하려면? Web Worker, Debounce, Throttle

UI 응답성을 개선하기 위한 성능 최적화 기법에는 Web Worker과 Debounce, Throttle가 있다.적용 대상과 역할이 조금 다르기 때문에 이 글을 읽고, 상황에 맞게 적용해 성능을 개선해보자! 1. Web Worker (웹 워커)무거운 연산이나 백그라운드 작업을 별도의 스레드에서 수행하는 기법을 말한다.JS는 싱글 스레드라 무거운 연산이 메인 스레드를 막아 UI 렌더링이 멈출 수가 있기 때문에 웹 워커는 별도의 스레드에서 작업 수행시켜 메인 스레드의 부하를 줄여 UI의 렌더링이 끊기지 않도록 유지하기 위해 사용한다. 1.1 사용 예시// App.jsfunction heavyCalculation(n) { let result = 0; for (let i = 0; i { const r..