23.07.21 18:20 작성
·
432
1
index.js에서
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이렇게 랜딩 페이지로 잘 가는데,
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import 'antd/dist/reset.css';
import { legacy_createStore as createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import rootReducer from './_reducers'; //'./_reducers/index.js'라고 안 해도 알아서 index.js인 줄 알고 해 줌.
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
//원래는 createStore만 해서 store를 redux에서 생성하는건데, 그냥 store는 객체밖에 못 받기 때문에
//promise와 function도 받게 해주기 위해 이 middleware와 함께 이렇게 만들어 주는 것.
//그래서 store 만든 것을 이렇게 store에다가 넣어주는 것.
//이렇게까지 하면 우리 application에 redux를 연결 시킨 것.
ReactDOM.render(
<Provider
store={createStoreWithMiddleware(rootReducer
,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<App />
</Provider>
, document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이렇게 redux 부분을 추가한 코드로 하면 랜딩페이지로 가지 않고 컴파일은 되나
localhosst:3000도, localhosst:3000/login도, localhosst:3000/register도 다 이렇게 흰 화면만 뜨고 해당 페이지로 가지 않습니다..
해결 방법 아시는 분 알려주시면 감사하겠습니다😭
답변 1
3
2023. 07. 21. 18:41
ReactDOM.render(
<Provider
store={createStoreWithMiddleware(rootReducer
,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<App />
</Provider>
, document.getElementById('root')
);
이 부분을
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider
store={createStoreWithMiddleware(rootReducer
,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<App />
</Provider>
, document.getElementById('root')
);
이렇게 수정하니 되었습니다 :)
혹시 같은 문제를 겪는 분이 계실까봐 댓글로 그냥 남겨두겠습니다!