33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Redux vs MobX (둘 다 배우자!)
Mobx4 와 Mobx6 차이
Decorator 가 사라지고 여러가지 문법적인 차이들이 있는것을 제외하고, Mobx4 와 Mobx6 의 어떠한 차이가 있을까요? 현재 현업에서 Mobx4 를 사용하고 Decorator 문법을 사용중인데, 이런것들을 감수하고 Mobx6 로 가야하는지 궁금합니다. (웬지 안가도 될것 같은 느낌적인 느낌이 들긴 하지만..)
- 미해결Redux vs MobX (둘 다 배우자!)
reaction 중첩 실행 문제
이렇게 사용하고있습니다. user_email이 변경되는 과정에서 console.log(value) 이게 onChange가 일어날 때마다 한 번씩만 실행되어야하는데 예를들어 'asdf'를 입력한다고 가정할 때 log에는 아래와 같이 찍힙니다. LOG => a LOG => as LOG => as LOG => asd LOG => asd LOG => asd LOG => asdf LOG => asdf LOG => asdf LOG => asdf 이렇게 점차 1개씩 스택이 쌓이듯 중첩되어 실행이되는데 제가 이상한건지 mobx가 이상한건지 감이 안 잡힙니다.. react-native 환경에서 사용하려합니다.
- 미해결Redux vs MobX (둘 다 배우자!)
간단한 질문 하나 할게요!
안녕하세요. 제로초님 async await 하실 때 비동기 함수명(?)의 delay를 new Promise로 해서 전달하는건 Promise 객체(?)로 전달을 해야되서 그런걸까요?
- 미해결Redux vs MobX (둘 다 배우자!)
vue와의 차이점
vue와의 차이점을 좀 여쭤볼려고합니다. vuex에서는 state <- 전역 변수 mutations <- state 변경(state trace를 위한 것) actions <- 비동기로직 로 관리를 하게 되는데 대충 예를 들어 비동기 로직이 들어가는 컴포넌트에서 this.isLoading = true try { this.list = await this.$store.dispatch('post/add', 보낼 데이터); } catch(err) { console.error(err) } finally { this.isLoading = false } 이렇게 해당 컴포넌트에서 처리를 해주고 있습니다. redux 에서는 store <- 전역변수 reducers, actions <- vuex의 mutations redux thunks, redux saga <- vuex의 actions 라고 대충 비교를 해볼 수 있을 것 같은데 여기서 제가 생각한 부분들이 맞는지 궁금합니다. 1. isLoginLoading을 전역에서 사용하는 이유 현재 redux에서는 logInLoading과 같은 것들을 전역에서 관리를 해주고 있는데 vue에서도 만약 여러 컴포넌트에서 공통으로 사용하는 state라면 actions를 활용해 데이터를 불러올 때 위의 코드처럼 지역에서 isLoading을 굳이 만들지 않고state.isLoginLoading처럼 만들어볼 수 있을것 같습니다. 2. logInError를 사용하는 이유. onClick = () => { dispatch(userSlice.actions.logIn(로그인데이터)) } logInError을 전역에 배치하는 이유는 위의 코드에서 try catch 하지 않고extraReducers[logIn.rejected].meta.error.message를 받아서 사용하기 위해서 인것 같습니다. vue에서는 그냥 try catch 사용 3. loginDone을 사용하는 이유 데이터를 잘 받아왔는지 확인하는 것 같은데 이 부분은 vue에서 비슷한 부분을 찾을 수 없어 더 헷갈리는 것 같습니다..
- 미해결Redux vs MobX (둘 다 배우자!)
리랜더링 질문
const { email, password } = userSelector((state) => state.user ); 이렇게 코드를 짜게 되면 email, password 뿐만이 아니라 user에 있는 어떤 데이터라도 바뀌게 되면 해당 컴포넌트는 무조건 리랜더링 되는건가요?
- 미해결Redux vs MobX (둘 다 배우자!)
getState()
혹시 useSelector(state => state.user)로 react에서는 분리된 userReducer의 state만 가져올 수 있는데 일반 js에서는 store.getState()로 전체만 들고 올 수 있는 것 같은데 이건 react-redux에서만 구현되어있나요?
- 미해결Redux vs MobX (둘 다 배우자!)
initialState 질문
아래 질문과 같은 질문입니다. 현재 코드에서 1. reducers/index2.js에 initalState 2. reducers/post.js에 initalState 3. reducers/user.js에 initalState 총 3개의 initalState가 있습니다. 아래 질문자님 말씀대로 reducers/index2.js에서 initalState를 빼줘도 잘 동작하는데 별도로 reducers/index2.js에 initialState(2번,3번의 InitialState를 합친 객체)를 별도로 넣어줄 필요가 있나요?
- 미해결Redux vs MobX (둘 다 배우자!)
캐싱
게시판 페이지에서 useEffect로 페이지에 진입했을 경우 다시 비동기 통신으로 데이터를 받아올 것 같은데 리덕스를 사용하면 캐싱이 가능하다고 하셨는데 redux store에 데이터가 있으면 비동기통신을 제한하는 그런 로직을 따로 넣는걸까요 ?
- 해결됨Redux vs MobX (둘 다 배우자!)
불변성 유지에서 궁금한점
addPost에 unshift는 return을 쓰지 않아도 변경 되는데 deletePoast의 filter는 return을 사용해야지만 적용이 됩니다. 혹시 왜그런지 알 수 있을까요? 찾아봐도 나오지가 않네요... export const postSlice = createSlice({ name: "post", initialState: [] as IPost[], //동기처리 & 내부적 액션 reducers: { addPost: (state, action) => { state.unshift(action.payload); }, deletePost: (state, action) => { return state.filter((element) => element.id !== action.payload); }, resetPost: (state, action) => { return []; }, }, //비동기 처리 & 외부적 액션 extraReducers: {}, });
- 미해결Redux vs MobX (둘 다 배우자!)
한 프로젝트 안에서 redux랑 mobx같이 쓸 수 있나요?
로딩변수나 메세지 띄우는 변수는 몹엑스로 만들어서 리덕스 액션 안에서 편하게 쓰고 싶은데요, 이미 App.js는 프로바이더로 감싸져있는 상태인데, App.js안에 공통으로 쓸 로딩바랑 메세지 컴포넌트 임포트해서 사용하고 싶거든요, 앱.제이에스를 또 옵져버블로 감싸는 방식으로 해도 괜찮은가요? 뭔가 프로바이더도 감싸고있는데 또 옵져버블로 감싸는게 덕지덕지 붙이는것같아서 이상한것 같아서 혹시 좋은 방법이 있거나 이미 몹엑스와 리덕스를 함께 사용하고 계신다면 주로 어떤 방식으로 설정하는지 궁금해서 질문합니다!!
- 미해결Redux vs MobX (둘 다 배우자!)
initialState
const initialState = { user: { isLoggingIn: true, data: null, }, posts: [], }; const store = createStore(reducer, initialState); initialState를 쪼갰는데 굳이 index2.js에서 store만들 때 initialState가 또 왜 필요한지 궁금합니다. 실제로 지우고 해보니까 똑같이 잘돌아가더군요.. const store = createStore(reducer);
- 미해결Redux vs MobX (둘 다 배우자!)
observable말고 useLocalObservable안에 있는 함수도 자동으로 action적용이 될까요?
안녕하세요. 제로초님! 항상 좋은 강의 열심히 듣고 있습니다! 혹시 observable안에 있는 함수가 자동으로 action 적용이 된다고 말씀주셨는데요! 그럼 useLocalObservable도 안에 있는함수도 자동으로 action이 적용 되는건가요?
- 미해결Redux vs MobX (둘 다 배우자!)
immer 적용후 틱택토 초기화가 안됩니다
틱택토에 이머 적용해 보았는데요 import React, { memo, useState, useReducer, useCallback, useEffect, useRef } from 'react'; import Table from './Table'; import style from './TicTacToe.module.scss'; const { produce } = require('immer'); const initialState = { winner: '', turn: 'x', tableData: [ ['','',''], ['','',''], ['','',''] ], recentCell: [-1, -1] } const SET_WINNTER = 'SET_WINNER'; export const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; const RESET_GAME = 'RESET_GAME'; const reducer = (state, action) => { return produce(state, draft => { switch (action.type) { case SET_WINNTER: draft.winner = action.winner; break; case CLICK_CELL: draft.tableData[action.row][action.cell] = state.turn; draft.recentCell = [action.row, action.cell]; break; case CHANGE_TURN: draft.turn = state.turn === 'o' ? 'x' : 'o'; break; case RESET_GAME: draft = { ...initialState, winner: state.winner } break; default: break; } }); } function TikTakTo() { const [state, dispatch] = useReducer(reducer, initialState); const { tableData, turn, winner, recentCell } = state; // const [winner, setWinner] = useState(''); // const [turn, setTurn] = useState('o'); // const [tableData, setTableData] = useState([ // ['','',''], // ['','',''], // ['','',''] // ]); useEffect(() => { const [row, cell] = recentCell; if(row < 0) { return; } //Game over let end = true; tableData.map(row => { row.map(cell => { if(cell === '') { end = false; } }) }); if( (tableData[row][0] === turn && tableData[row][1] === turn && tableData[row][2] === turn) || (tableData[0][cell] === turn && tableData[1][cell] === turn && tableData[2][cell] === turn) || (tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][2] === turn) || (tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn) ) { // 승리 dispatch({ type: SET_WINNTER, winner: turn }); end = true; } else { dispatch({ type: CHANGE_TURN }); } if(end) { dispatch({ type: RESET_GAME }); } }, [recentCell]); const onClickTable = useCallback( () => { dispatch({ type: SET_WINNTER, winner: 'o' }); }, [], ) return ( <> <Table onClick={onClickTable} tableData={tableData} dispatch={dispatch} ></Table> { winner && <div className={style.result}> {winner}님의 승리 </div> } </> ) } export default memo(TikTakTo); 다른건 문제없이 작동하는데, 승리나 무승부 한 후에 테이블데이터 리셋 결과가 화면에 적용되지 않습니다. 리셋게임부분에 뭔가 코드를 잘못 적은걸까요..?
- 미해결Redux vs MobX (둘 다 배우자!)
isloading을 공통변수로 사용하고 싶을때
user가 로그인할때도 로딩 true, false하지만 post에서 글등록시에도 로딩을 true, false로 바꿔주기위해 user, post외에도 common이라는 슬라이스(? 리덕스)를 만들어주어서 common에 isLoading이라는 state를 만들어주고 싶은데요, 비동기 액션들의 pending시에 isLoading을 true로 하려면 common에 액션을 모두 임포트해서 매칭해서 isLoading을 바꿔주면 될거같은데요, fulfilled나 reject시에 isLoading false는 user 나 post에서 결과처리할 때 직접 상위 객체 안에 있는 common에 접근해서 바꿔줄 순 없나요? 뷰쓸때는 vuex에서 rootState에 접근할 수 있어서 자유자재로 넘나들었는데 리액트에서도 같은 방식으로 만들려고 하니 상위 state에 접근하는 방식을 잘 모르겠네요!! 만약 상위state에 접근할 수 없다면, common에 모든 비동기 함수의 pending, fulfilled, reject를 addCase에 다 넣고 다루어 주어야하는걸까요..?
- 미해결Redux vs MobX (둘 다 배우자!)
함수형 액션 만드는거 질문이요 !
원래 액션 보통, export function updateCartInfo(cartInfo) { return { type: UPDATE_CART_INFO, payload: cartInfo } } 이런식으로 만들어서 쓰다가, 액션에서 axios사용하면서, 자연스럽게 async와 await를 붙여서 사용했었거든요, export async function loginUser(dataToSubmit) { const request = await axios.post('/api/user/login', dataToSubmit) .then(res => res.data ); return { type: LOGIN_USER, payload: request } } 그런데 이 수업을 듣고 의문이 생긴게 만약 제가 async와 await를 사용하지 않았었다면 함수형으로 만들었어야 비동기 처리가 되는건가요? 아니면 지금도 async와 await는 사용하고 있지만 내부적으로는 제대로 디스패치가 안되고 있는 걸까요? 설정은 const createStoreWithMiddleware = applyMiddleware( promiseMiddleware, ReduxThunk )(createStore); ReactDOM.render( <Provider store = {createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )} > <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById('root') ); 이렇게 해서 사용하고 있습니다. 저도 지금 머릿속이 막 헷갈려서 질문 내용을 잘 정리했는지 모르겠는데 ... 그러니까.. 1. 객체로 만들어 보낼땐 아무 문제 없음 ok 2. 그런데 액션안에서 axios를 쓰면서 비동기 고민을 하게 됨 3.ReduxThunk는 함수형을 비동기 처리해주는 미들웨어인데 나는 여태까지 객체를 리턴하고 있었음 4.그런데 나름 async와 await는 붙여서 사용함, 그러니 문제 없는 것인가???????? 5.만약 async와 await가 없었다면 함수형으로 만들었어야 문제없이 잘 데이터들이 들어가는것인가???? 질문이 두서없지만 답변 부탁드립니다...ㅜ_ㅜ
- 미해결Redux vs MobX (둘 다 배우자!)
reaction이 여러번 실행되는 문제
안녕하세요. 좋은 강의 잘 듣고있는 1인입니다. reaction를 사용하여 특정 값에 대한 변경이 있을 때 콜백이 실행되도록 하는 기능으로 알고있는데 의문점이 있어 이렇게 질문드립니다. autorun(() => { console.log(456456); }) reaction(() => doubleObject.value, () => { console.log(123123); }) 이런식으로 작성되어있고 doubleObject.js는 const doubleObject = observable({ value: 1, get double() { return this.value * 2 }, increment() { this.value++ }, }) 이렇게 되어있습니다. increment를 실행하여 value를 바꿔보면 console.log가 찍히는데 reaction 부분이 계속 새로운 스택이 쌓이듯 증가되어 실행됩니다. 혹시 몰라 alert으로 띄워봐도 처음엔 1번 increment가 실행될때마다 +1 되어 alert이 두 번, 세 번, 네 번 이렇게 중첩되어 뜹니다. 혹 이 관련하여 아시는 내용이 있을까요?
- 미해결Redux vs MobX (둘 다 배우자!)
redux-observer 강좌는 예정이 따로 없으신가요?
redux-observer 강좌는 예정이 따로 없으신가요?요즘 많이 쓰이는거같던데 공홈 말고 따로 참고할만한 책이나 자료 있으면 추천 감사드리겠습니다 ㅎ
- 미해결Redux vs MobX (둘 다 배우자!)
redux 관련 문의 드립니다.
redux vs mobx 강의를 듣던 중 index2.js를 다음과 같이 작성하고 명령어 node index2를 실행하였더니 Cannot access 'store' before initialization, 라는 에러가 나와서, store 선언부 즉, const store = createStore~~~ 부분을 initialState 바로 밑으로 옮기면 다시 Cannot access 'enhancer' before initialization, 라는 에러가 뜨고 이로 인해서 enhancer를 다시 최상단으로 올리면 Cannot access 'firstMiddleware' before initialization라는 에러가, firstMiddleware를 최상단으로 올리면 처음의 Cannot access 'store' before initialization 가 뜨는 악순환이 반복되고 있는데, 도대체 무엇이 잘 못된것 일까요?ㅠㅠ 아무리 강의를 다시 봐도 제로초님과 같은 순서로 작성한 것 같은데요.. const { createStore, applyMiddleware } = require("redux"); const reducer = require("./reducers"); const { logIn, logOut } = require("./actions/user"); const { addPost } = require("./actions/post"); const initialState = { user: { isLoggingIn : true, data: null, }, posts: [], }; const firstMiddleware = (store) = (dispatch) = (action) => { console.log("액션로깅", action); dispatch(action); }; const thunkMiddleware = (store) = (dispatch) = (action) => { if (typeof action === "function"){ // 비동기 (비동기인 경우 액션을 함수로 넣겠다!) return action(store.dispatch, store.getState); } return dispatch(action); }; const enhancer = applyMiddleware( firstMiddleware, thunkMiddleware, ); const store = createStore(reducer, initialState, enhancer); console.log("1st", store.getState()); // 하단의 코드들은 react component에서 작성 및 실행되어야 하는 코드. store.dispatch(logIn({ id: 1, name: "eunsonny", admin: true })); console.log("2nd", store.getState()); // store.dispatch(addPost({ userId: 1, id: 1, content: "첫번째 안녕하세요."})); // console.log("3rd", store.getState()); // store.dispatch(addPost({ userId: 1, id: 2, content: "두번째 안녕하세요."})); // console.log("4th", store.getState()); // store.dispatch(logOut()); // console.log("5th", store.getState());
- 미해결Redux vs MobX (둘 다 배우자!)
안녕하세요 디스패치시에 오류가 발생하는데 구글링시에도 나오지 않아서 질문을 드립니다.
안녕하세요 디스패치시에 오류가 발생하는데 구글링시에도 나오지 않아서 질문을 드립니다. 이런 오류가 떠서 임시방편으로 {data:'b'}이런 식으로 하니 오류가 뜨지는 않는데 이런식으로 디스패치 할 시에는{ compA: { data: 'b' }, compB: 'b', compC: 'c' } 이런 스테이트 값이 도출되어 해결하지 못한 것 같습니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
next.js 에서 Mobx
getServerSideProps 에서 가져온 Store 함수를 써도 변경이 되나요??? nextjs에서 Mobx 쓰는 법이 궁금합니다!