인프런 커뮤니티 질문&답변

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

이런 오류가 뜨면서 브라우저 렌더링이 안됩니다. 

1. 이걸 보면 호환문제는 아닌 것 같고,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>
</React.StrictMode>
);

import './App.css';

function App() {
return (
<div className="App">
</div>
 );
}

export default App;

import {createSlice, configureStore} from '@reduxjs/toolkit'

//state 만들기
let hobby = createSlice({
name: 'hobby',
initialState: 'dancing'
})

//state 등록하기
export default configureStore({
reducer:{
hobby : hobby.reducer
/*작명: createSlice만든거.reducer */
 }
})

import {useSelector} from "react-redux";

function Cart(){
let a = useSelector((state)=> state.hobby)
console.log(a)
return(a)
}

전체 코드입니다. 2번처럼 hook 규칙을 어긴것도 아닌것 같고, 3번 중복 설치 문제일까요??

정말 찾아도 찾아도 모르겠어요