inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Slack 클론 코딩[실시간 채팅 with React]

Warning: Invalid hook call 오류

해결된 질문

635

정지은

작성한 질문수 5

0

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.
이런 오류가 뜨면서 브라우저 렌더링이 안됩니다. 

스크린샷 2023-06-08 오후 6.20.36.png

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번 중복 설치 문제일까요??

스크린샷 2023-06-08 오후 6.23.28.png

 

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

 

react

답변 2

0

정지은

콘솔 오류창을 더 내려보니 이런 문구도 있었습니다. 오류를 더 자세히 읽어야 겠어요!

react-dom.development.js:18687 The above error occurred in the <BrowserRouter> component:

at BrowserRouter (http://localhost:3000/static/js/bundle.js:46950:5) at Provider (http://localhost:3000/static/js/bundle.js:35586:5) 

0

정지은

해결했습니다.
<BrowseRouter>를 설치하지 않고 작성한 것이 문제가 되었습니다

import만 하면 vscode 상으로는 문제가 없어서, 간과했습니다.

이 오류는 공식문서에 나온 방법으로는 해결이 불가능해서, 혹시 저처럼 리액트라우터를 설치하지 않고, <BrowseRouter>를 작성했다가 페이지를 렌더링을 하는데 오류를 가진 사람들을 위해서 블로그에 포스팅을 하겠습니다.
읽어주셔서 감사합니다.
코드 한줄을 쓰더라도 왜 이 코드를 써야하는지 생각하면서 작성하겠습니다

기본 셋팅과 관련하여

0

92

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

150

2

useEffect 개수 관리

0

110

2

라이브러리 서치 방법

0

104

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

144

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

178

2

초기세팅중 packge.json 에러떠요

0

156

2

CORS - Access-Control-Allow-Origin 누락 문제

0

431

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

959

1

배포 방법

0

298

2

npm run dev 시 빌드가 매우 느려졌습니다

0

990

2

alias 경로 설정 오류

0

452

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

277

1

제네릭 질문

0

218

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2