Redux 또는 MobX 를 통한 상태 관리
1.상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리
리액트 생태계에서 사용되는 상태 관리 라이브러리는 대표적으로 Redux 와 MobX 가 있습니다. 이 둘의 특징을 배워보고 직접 사용하면서 알아가봅시다. 상태 관리 라이브러리의 필요성 상태 관리 라이브러리란게, 과연 필요할까요? 무조건 필요하지는 않습니다. 하지만 한가지는 확실합니다. 규모가 큰 앱에선 있는게, 확실히 편합니다. 제가 존경하는 개발자이면...
2.Redux (1) 소개 및 개념정리
리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더
3.Redux (2) 리액트 없이 쓰는 리덕스
리덕스는 리액트에 종속되지 않습니다. 리액트에서 사용하려고 만든거긴 하지만, 실제로 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수도 있습니다 (예: angular-redux, ember-redux...) 물론, 바닐라 자바스크립트와도 함께 사용할 수도 있겠죠. > 바닐라 (vanilla) 자바스크립트는, 라이브러리나 프레임워크 없이 사용하는 자바스...
4.Redux (3) 리덕스를 리액트와 함께 사용하기
3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사실
5.Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리
Immutable.js 사용하기 Immutable.js 는 불변성을 유지해줘야 하는 객체의 값을 더 쉽게 업데이트 할 수 있게 해줍니다. Immutable.js 의 사용법은 여기서 더 자세히 보실 수 있습니다. 우선, 설치를 해주겠습니다.
6.MobX (1) 시작하기
MobX 는 또 다른, 하나의 인기있는 리액트 상태 관리 라이브러리입니다. 저는 MobX 는, 사실상 라이브러리 그 이상의 가치를 하는, 리액트의 개발 흐름 자체를 많이 바꿔주는 강력한 도구라고 생각합니다. "MobX 는 최소한의 공수로 여러분들의 상태관리 시스템을 설계 할 수 있게 해줍니다." The curious case of mobx state tre...
7.MobX (2) 리액트 프로젝트에서 MobX 사용하기
MobX 는 리액트 종속적이진 않지만, 리액트에서 쓰려고 만들어졌기 때문에 함께 사용하면 엄청난 시너지가 발생합니다. 더 쉬운 글로벌 상태 관리는 물론이고, setState 도 쓸 필요가 없게 됩니다. 2-1. MobX 가 리액트를 만나면 우리가 이전 섹션에서 decorator 문법을 통해서 더 편하게 MobX 를 사용하는 방법을 배웠었는데요, 우리가 ...
8.MobX (3) 심화적인 사용 및 최적화 방법
지난 포스트에서 MobX 의 기본적인 사용 방법과, 리액트에서는 어떻게 사용하는지 알아보았습니다. MobX 를 조금 더 복잡한 프로젝트에서 사용을 한다면 어떻게 해야 할까요? 추가적으로, 어떻게 해야 컴포넌트의 업데이트 성능을 최적화 하면서 프로젝트를 구성 할 수 있는