velopert
5. Context 와 함께 사용하기 · GitBook
5. Context 와 함께 사용하기 · GitBook
undefined
https://react.vlpt.us/integrate-api/05-using-with-context.html
마지막 UsersContext.js에서 아래 부분을 추가하는 부분이 생략된거 같습니다.
export const getUsers = createAsyncDispatcher('GET_USERS', api.getUsers);
export const getUser = createAsyncDispatcher('GET_USER', api.getUser);
한가지 궁금한점이 있는데요... asyncActionUtils.js 파일에서 dispatch 함수를 어떻게 호출할 수 있는건지요? dispatch 함수를 따로 전달해주지 않았는데도 호출하는게 이해가 안되고 있어서요..ㅠ
아 아닙니다. 위의 질문은 무시해주세요. createAsyncDispatcher 함수 호출시 actionHandler를 반환하고, 반환된 actionHandler를 통해서 dispatch를 넣어주고 있네요..
선생님~~!! 오타가 있어요 ㅠㅠㅎㅎ(별건 아닌데..) import 걸어줄 때, 마지막에는 경로 잘 지정이 되있는데
중간에 import createAsyncDispatcher from './createAsyncDispatcher';이렇게 되어있네요..! import createAsyncDispatcher from "./asyncActionUtils"; 이렇게 수정되야겠죠..??ㅎㅎ 혹시 저처럼 초보자분들 헷갈릴까봐 ㅠㅠ ㅎㅎ 댓글남깁니다~!
state와 dispatch를 같은 컨텍스트에 두면 state에 변경이 생겼을 때 state를 쓰지않고 dispatch만 사용하는 컴포넌트에도 재렌더링이 일어나기 때문이면 지금 UsersContext.js 에서 state가 들어있는 프로바이더가 dispatch가 들어있는 프로바이더를 감싸고있는데 그러면 여기서는 부모컴포넌트에 변경이 생기면 자식 컴포넌트에도 변경이 일어난다는것이 적용안되는건가요?
@jaykiim state와 dispatch에 대해 각각 createContext()를 호출하였기 때문에 하나의 Context에서 state와 dispatch를 관리하는 것이 아니라 각각의 Context가 따로 존재합니다.
<UsersStateContext.Provider value={state}>
<UsersDispatchContext.Provider value={dispatch}>
{children}
</UsersDispatchContext.Provider>
</UsersStateContext.Provider>
위처럼 감싸져있지만 children 컴포넌트들은 각자 관찰하고 싶은 상태에 대한 context만 등록하여 사용하기 때문에, state가 업데이트되더라도 dispatch context만 사용하는 컴포넌트는 리렌더링되지 않습니다. 만약 state context를 사용하거나 둘 다 사용하는 컴포넌트는 리렌더링됩니다.
