React에서 index.js에 Provider로 ReactDOM을 포장을 하는데 그 이유가 이제 전체 App에서 Provider가 제공하는 값들을 사용하기 위해서이다. 보통 LayoutProvider, UserProvider, ThemeProvider를 생성하게 된다.
UserProvider 에서는 사용자의 상태를 관리하고 있어서 App.js에서는 UserProvider를 이용해서 사용자의 로그인 상태를 가져온다. 이렇게 가져온 상태를 통해서 App의 화면을 어떤것을 보여줄지에 대해서 설명한다.
index.js
ReactDOM.render(
<LayoutProvider>
<Provider store={store}>
<ThemeProvider theme={Themes.default}>
<BrowserRouter>
<HelmetProvider>
<App />
</HelmetProvider>
</BrowserRouter>
</ThemeProvider>
</Provider>
</LayoutProvider>,
document.getElementById('root'),
);src/context/LayoutContext.js
import React from 'react';
var LayoutStateContext = React.createContext();
var LayoutDispatchContext = React.createContext();
function layoutReducer(state, action) {
switch (action.type) {
case 'TOGGLE_SIDEBAR':
return { ...state, isSidebarOpened: !state.isSidebarOpened };
default: {
throw new Error(`Unhandled action type: ${action.type}`);
}
}
}
function LayoutProvider({ children }) {
var [state, dispatch] = React.useReducer(layoutReducer, {
isSidebarOpened: true,
});
return (
<LayoutStateContext.Provider value={state}>
<LayoutDispatchContext.Provider value={dispatch}>
{children}
</LayoutDispatchContext.Provider>
</LayoutStateContext.Provider>
);
}
function useLayoutState() {
var context = React.useContext(LayoutStateContext);
if (context === undefined) {
throw new Error('useLayoutState must be used within a LayoutProvider');
}
return context;
}
function useLayoutDispatch() {
var context = React.useContext(LayoutDispatchContext);
if (context === undefined) {
throw new Error('useLayoutDispatch must be used within a LayoutProvider');
}
return context;
}
export { LayoutProvider, useLayoutState, useLayoutDispatch, toggleSidebar };
// ###########################################################
function toggleSidebar(dispatch) {
dispatch({
type: 'TOGGLE_SIDEBAR',
});
}
App.js
App.js에서는url을 어떤값을 입력했을때 어떤 페이지로 이동할지에 대한 내용을 작성한다.- 여기서 사용되는게
react-router-dom이다. - 참고로
function App()으로 정의 되어 있었는데,epoxrt default function App()으로 변경하면 아래export를 따로 해줄필요가 없다. (매번 자동적으로 입력했는데 이게 좋은듯) - 이렇게 가져온
isAuthenticated의 값은 global 하게 사용이 가능하다 PrivateRoute,PublicRoute를 나누어서 로그인한 사용자, 로그인하지 않은 사용자의 Route를 나눈다.
'Web 개발 > React' 카테고리의 다른 글
| [React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0) | 2020.03.01 |
|---|---|
| [React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이 (1) | 2020.03.01 |
| [React] 유용한 컴포넌트 리스트 (0) | 2020.02.29 |
| [React] Dashboard 좋은 재료들 모음 (0) | 2020.02.29 |
| [React] render함수에서 JSX Dictionary Iteration 을 하는방법 (0) | 2020.02.23 |