mobx (2) 썸네일형 리스트형 MobX | React와 MobX로 카운터 만들기 새로운 기술에 가장 빠르고 또 가까이 다가갈 수 있는 방법은 결국 직접 활용해서 무언가를 만들어 보는 것이라 생각한다. 앞서 이론 중심으로 소개했던 MobX를 활용한 간단한 예제를 만들어보자. 위와 같은 아주 원초적인 UI의 Counter를 (1)React만 사용해 구현해보고 (2)MobX를 사용하는 형태로 바꾸어볼 예정. (1) React로만 Counter 구현하기 Counter 컴포넌트 구현 //Counter.jsx import React, { useState } from "react"; const Counter = () => { const [num, setNum] = useState(0); //숫자 +1 const increaseNum = () => { setNum(num + 1); }; //숫자.. MobX | 주요 개념 알아보기 글의 목적 회사에서 고객별로 인테리어 서비스 견적을 통합 관리하는 백오피스를 개발하며, 모든 페이지마다 필수적으로 필요한 고객 정보를 어떻게 관리하면 좋을지 고민하게 되었다. 가장 익숙한 방법인, 최상단에서 state로 관리할까 생각하니 떠오른 이미지는. . 페이지와 컴포넌트의 수가 꽤나 많기에 state로 관리하기엔 위 사진처럼 너무나 많은 Props가 생겨날거라 생각했고, 이는 개발 방향이 객체지향과 너무나 동떨어진 구조로 흘러가 결국 낮은 유지보수성을 가져올것이라 판단했다. 때문에 컴포넌트와 상태 업데이트 로직을 분리하는 전역 상태 관리를 선택하게 되었다. 전역 상태 관리를 해본 적이 없어 팀원분들과 상의를 해보았는데, 상대적으로 러닝커브가 낮고 회사 코드 중 이미 일부분에 사용되고 있어 흐름을 참.. 이전 1 다음
