상태관리 라이브러리 (4) 썸네일형 리스트형 [React] 상태관리 라이브러리 비교하기(redux, zustand, jotai, recoil) react 기반의 웹 프로젝트에서 상태 관리 라이브러리는 유지보수를 위해 필수적이다. 여러 개의 라이브러리 중에서 어떤 걸 사용해야 할까. 많은 글들이 redux, zustand, jotai, recoil, 그리고 추가로 valtio 등을 추천한다. 이 글에서는 앞의 4가지를 비교하면서 어떤 상황에 어떤 라이브러리가 적합한지 판단한다. 목표4개의 라이브러리 간 특징을 비교하고 어떤 상황에서 사용하면 좋을지 판단하기 개발 철학이들의 컨셉은 크게 FLUX와 Atom 두 가지로 나뉜다. FLUX FLUX는 중앙집중식 상태관리 시스템을 의미하는 것으로, 컴포넌트에서 사용되는 state와 state setter 로직을 단일한 store에서 관리한다는 방침이다. 이는 가장 말단에서 가장 작은 state가 필요한.. [react] 상태관리 라이브러리는 정말로 필요한가?(context api) react를 배우고 규모가 있는 웹을 만들 때면 자연스레 듣게 되는 단어가 바로 상태관리 라이브러리다. 이것이 왜 필요한지 묻는다면 일반적으로는 "리엑트의 하향식 데이터 전달방식"은 규모가 큰 앱에서 버그가 발생하기 쉽고 생산성과 유지보수에 문제가 되기 때문이라고 말해준다. 그런데, "react의 하향식 데이터 전달방식" 이 왜 "문제"를 일으킬까. 그리고 정말로 상태관리 라이브러리라는 대안이 정말로 불가피한 걸까? 1. react는 props drilling 문제를 일으킨다? react로 큰 규모의 앱을 만들 때 으레 예상되는 문제가 바로 props drilling 이다. props drilling 간단히 말하자면, react는 state를 부모 컴포넌트에서 자식 컴포넌트로만 전달할 수 있기 때문에, .. [Redux] 사용법부터 이론까지 살펴보는 Redux: 3. 리엑트에서의 사용 방법 상태관리 라이브러리인 리덕스를 리엑트와 연결시키는 방법에 대해 알아보자. 세팅 redux, react-redux 일반적으로는 여기에서 보일러 플레이트를 간편하게 세팅하고 dev tool을 사용하기 위해 redux-toolkit을 추가한다. 하지만, 여기서는 리엑트에 리덕스를 연결시키는 방법에만 집중하기 위해 다음 기회에 다루겠다. 스토어 생성 및 앱에 바인딩하기 provider provider은 react-redux가 제공하는 컴포넌트다. 이걸로 리엑트 컴포넌트를 감싸주면, 해당 컴포넌트에서 리덕스 스토어를 가져오고 dispatch 할 수 있다. //@ 리덕스 스토어를 세팅한 후, Provider 앱에 import const root = ReactDOM.createRoot(document.getEleme.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 1 기본 컨셉 redux는 오늘날 프론트엔드 생태계에서 가장 인기있는 상태관리 라이브러리다. npm trend를 살펴보면 recoil이나 zustand, zutai, mobx 등과 비교했을 때 더 높은 다운로드 수를 봐도 그 인기를 알 수 있다. 하지만, 리덕스는 모든 곳에서 만능이 아니며, 그 컨셉을 제대로 이해해야 효력을 볼 수 있다. 이 시리즈에서는 리덕스 사용법과 이론에 대해 살펴본다. 상태관리 라이브러리의 등장 배경과 리덕스 FLUX 디자인은 왜 등장했는가 리엑트는 상태관리를 위해서 state를 props와 단방향(하향식) 데이터 바인딩으로 사용한다. 여기서 state는 ui에 삽입되는 데이터 값을 의미한다. 데이터 값이 변환될 때는 다음 과정을 거친다. 이벤트 리스너나 fetch 등의 비동기적 로직에서 se.. 이전 1 다음