Redux vs MobX (둘 다 배우자!)
Redux vs MobX (둘 다 배우자!)
수강정보
(4개의 수강평)
167명의 수강생
스킬태그 #Redux, #MobX
29,700원
지식공유자 : 조현영
31회 수업 · 총 6시간 30분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
quddnr005 프로필

액션 생성자 함수에 관하여 quddnr005 9시간 전
먼저 퀄리티 좋은 강의 감사합니다. 제 질문은요 강의중 액션생성자 함수부분에서 dispatch로 저 액션생성자함수인 changeCompA라는 함수를 넣고 파라미터로 넣으면 그 파라미터가 데이터 이잖아요. 그런데 제가 여기서 의문점이 든게 reducer라는 것에서 case 즉 type을 적어주셨는데 밑에 있는 객체생성자 함수로는 type까진  바꿔주지 않게 되는데 type도 파라미터로 넣어주고 작성해주어야되는게 아닌가요... ㅠㅠ  const changeCompA = (data) => { return { //action type: "CHANGE_COMP_A", data, }; };

1
devsn 프로필

안녕하세요 proxy 에러 질문드립니다 devsn 14일 전
안녕하세요 개인 웹사이트의 게시판을 만들고 있습니다. mobx를 통해서 ajax 요청을 보내다가 proxy로 값이 담기는 문제 때문에 질문드립니다. 위 사진에서, in error, load라고 하는 부분이 mobx에서 백엔드로 요청을 보내고, data 프로퍼티에 db값을 넣은 부분입니다. 토글을 내려서 array의 내용을 확인해 보면, 제가 정상적으로 db에 넣은 값이 잘 나옵니다. (workbench도 다 확인했습니다) 아래는, mobx store 파일의 전체 코드입니다 위 사진 상에서, 19줄에서 proxy로 값이 담깁니다. 이 부분이, 맨 위 사진에서 나오는 in mobx, errorsReact  render 부분입니다.  아래 사진은, mobx store에 있는 render를 불러와서, 배열 안에 있는 엘리먼트를 map 함수로 뿌려주는 컴포넌트입니다. (현재는 주석처리했습니다) 하지만, errorsReact.render가 proxy로 되어있어서 하위 컴포넌트 ( EReactList ) 에서 props를 읽지를 못했습니다. 혹시 어디를 고쳐야 render에 proxy가 아닌 배열 데이터를 담을 수 있을까요? ( 현재 프론트는 next, react 사용 중이고, 백엔드는 express, sequelize 사용 중입니다 )

2
devsn 프로필

안녕하세요 강의 관련 질문드립니다 devsn 26일 전
안녕하세요  실무에서는 redux , mobx 중에 어느 것을 더 많이 사용하는 지 궁금합니다 저는 현업 개발자는 아닙니다 다만, redux와 redux-saga를 통해서 프로젝트를 몇 개 정도 했습니다.  코드를 작성하면서, 코드량이 너무 길어진다는 점, 그로 인한 시간 소요, (근데 정말 나중에는 오타도 안 나더라구요)가 단점으로 느껴졌습니다. 노드버드 강의에서 '초급일 땐 리덕스, 중급일 땐 mobx를 사용하는게 좋다' (정확하게는 기억이 안나네요) 라고 말씀하신 게 기억이 나서, 해당 강의를 수강했습니다.  실제로, mobx가 코드량이 압축적이고 사용하기 편하더라구요 다만 디버깅 하는게 불편하긴 했습니다. 그럼, redux와 redux saga를 사람들이 왜 사용하는 지 궁금합니다. 제가 아직 redux와 saga의 많은 사용법을 알지 못해서 드리는 질문일 수도 있겠습니다만... saga의 effects + 디버깅의 편리성 때문에 위 조합을 사용하는 건가요? mobx를 사용한다면, 단순히 코드량이 적기 때문에 사용하는 건가요?

1
24 World 프로필

payload 는 정확히 어떤 역할을 하는건가요? 24 World 2달 전
payload에 대한 자세한 설명해주시면 감사하겠습니다. 검색을 해도 정확히 이해가 되지 않아서요~

1
Kir 프로필

ssr시 Mobx 사용이 궁금합니다. Kir 2달 전
어디에 질문해야할지 고민하다가 여기에 질문합니다 ㅠㅠ 이런식으로 next에서 서버사이드 렌더링을 통해서 하려고 하는데 방법을 모르겠습니다  useEffect 통해서 할 때는 로드인포 실행된 후 userStore.me에 로그인 값 잘 저장됐는데 어떻게 해야할지 모르겠네요 ㅠㅠ mobx는 찾아도 잘 나오지 않아 문의드립니다. export const getServerSideProps = async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } await userStore.loadInfo(); };

3
이광현 프로필

데코레이터 사용시 에러가 납니다. 이광현 3달 전
작성하신대로 코드를 작성했는데 @observer 을 붙였더니 에러가 발생하는데 내용은 experimentalDecorators 옵션을  jsconfig나 tsconfig를 통해 설정하라고 하는데요. 그런 설정 없이 그냥 사용은 안되는 건가요.

1
혁999 프로필

다른 곳에서 질문이 안되서 여기다 질문을 남깁니다. 혁999 5달 전
웹 게임을 만들며 배우는 React에 TypeScript 적용하기 여기서 가르쳐주시는게 hooks 와 class 로 작성하는 두가지 방법을 모두 알려주시나요? 본격적으로 react + mobx + ts 로 개발하기 앞서 react + ts강좌를 하나 더 들어보려고합니다.

1
혁999 프로필

context 사용 시 에러가납니다. 혁999 5달 전
강사님이 만드신 소스에서 그냥 간단하게 + - 되는 카운터 기능의 예제를 진행중입니다. 역시  hooks를 이용하려구 하구요. // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import StoreProvider from './Context'; ReactDOM.render( <StoreProvider> <App />, </StoreProvider>, document.getElementById('root'), ); ------------------------------------------------------------------------- // src/Context.js import React, { createContext } from 'react'; import { counterStore } from './store/counterStore'; export const storeContext = createContext({ counterStore }); export const StoreProvider = ({ children }) => { return <storeContext.Provider>{children}</storeContext.Provider>; }; export default StoreProvider; ------------------------------------------------------------------------- // src/App.js import React from 'react'; import { useObserver } from 'mobx-react'; import useStore from './useStore'; // import { counterStore } from './store/counterStore'; function App() { const { counterStore } = useStore(); return useObserver(() => ( <div> <h1>{counterStore.number}</h1> <button onClick={counterStore.increase}>+1</button> <button onClick={counterStore.decrease}>-1</button> </div> )); } export default App; ------------------------------------------------------------------------- // src/store/counterStore.js import { observable } from 'mobx'; const counterStore = observable({ number: 0, increase() { counterStore.number++; }, decrease() { counterStore.number--; }, }); export { counterStore }; ------------------------------------------------------------------------- // src/useStore.js import { useContext } from 'react'; import { storeContext } from './Context'; const useStore = () => { const { counterStore } = useContext(storeContext); return { counterStore }; }; export default useStore; ------------------------------------------------------------------------- TypeError: Cannot destructure property 'counterStore' of 'Object(...)(...)' as it is undefined. 실행시 위와 같이 디스트럭처링을 할 수 없다고 나옵니다. 그래서 위의  src/useStore.js 부분에서 디스트럭처링 하지 않고 그냥 하게되면 // src/useStore.js import { useContext } from 'react'; import { storeContext } from './Context'; const useStore = () => { const counterStore = useContext(storeContext); return { counterStore }; }; export default useStore; TypeError: Cannot read property 'number' of undefined Context API를 사용하지 않을 경우 스무스하게 잘 되는데 Context만 이용하려 하니 게속 에러가 발생합니다.. ×

4
혁999 프로필

class vs hooks 혁999 5달 전
간단하게 그냥 +1 , -1하는 것을 Mobx 와 React로 작성했습니다. 저는 함수형을 추구하고 앞으로도 hooks를 이용할것이기 때문에 일단은 비교하면서 진행중인데요. mobx-developer-tools를 설치해써 비교했는데 class는 먼가 그래도 알아볼수있게끔 나왔는데 hooks는 이상하게 나와서요. 이게 원래 이런건가요?..

1
혁999 프로필

LocalStore와 useState에 대한 차이가 있을까요? 혁999 5달 전
굳이 로컬스토어를 만드는 것보다 어차피 해당 컴포넌트에서만 사용할 상태라면 useState를 사용해도 무방한것 아닌지 궁금합니다. 영상을 쭉 봤는데 실제로 누군가 질문을 해주셨는데 못보시고서 답변을 안하신것 같아서요.  useState를 사용할 경우, 추후 상태 변경을 할 때 불변성을 유지해야하는 것, mobx의 LocalStore를 이용할 경우 불변성을 고려하지 않아도 된다는 것이 예상이 되긴하는데 아닌가요?

1
슈퍼장 프로필

useSelector 사용시 문제점 문의 슈퍼장 5달 전
컴포넌트에서 user, posts 를 store 에서 꺼내올 때 매번 useSelector 를 사용하지 않고 const { user, posts } = useSelector(store => store) 위처럼 한번만 호출하여 사용하면 강의에서 class 기반에서 성능상의 이유로 reselect 사용해야 한다는 것고 동일한 이슈가 발생하는 건가요?  즉 user 만 업데이트 되어도 posts 까지 가져오는 연산을 수행하는지.. 한다면 저렇게 사용하면 안될 것 같은데 궁금하네요. 혹시 user 만 업데이트한 경우 posts 도 가져오기 위한 연산을 하는지 유무를 제가 직접 확인해볼 수 있는 방법이 있을까요?

2
mollang 프로필

몹엑스 비동기 실습 중 질문드립니다 mollang 6달 전
안녕하세요 제로초님 몹엑스와 axios로 비동기를 이용해 데이터를 프론트단에 호출해보고 싶어 연습하던 중 질문이 생겼습니다. (상단 초기스테이트들은 무시해주세요) 아래처럼 postStore에 loadProblems라는 함수에 호출할 주소를 axios로 불러 구조분해한 data를 콘솔에 찍으면 원하는 json들이 나옵니다 그 값을 14줄에 있는 data에 넣어주고 싶은데 (예제인 addPost 함수처럼) 그 부분이 왜 안 되는지 궁금합니다. 27번줄 this.data 가 -> " Proxy {0: Proxy, 1: Proxy, Symbol(mobx administration): ObservableArrayAdministration} " 이걸로 콘솔에 찍힙니다. 프론트 화면에서 useEffect로 (컴포넌트디드마운트시) 첫 렌더링때 데이터들을 불러주고 싶어 아래처럼 호출하였는데 호출방식도 잘못된건가요? 조언 부탁드립니다 ㅜㅜ

1
김로인 프로필

제로초님 김로인 6달 전
제로초님 공부 하다가 궁금한게 생겨 질문 합니다! 혹시 redux-thunk와 redux-saga를 각각 어느때 쓴다라고 혹시 구별 된게 있나요?? 둘다 비동기 이긴 한데 노드버드 강좌에서 redux-thunk보다 redux-saga가 더 강력 해서 쓴다고 하셨긴 했는데 그 이유가 있을 까 해서요  그리고 saga의 한계점이나 단점이 있을까요?

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스