오류 노트

18. DOM 속성 인식 하지 않음

오류 메세지

React does not recognize the labelHidden prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase labelhidden instead. If you accidentally passed it from a parent component, remove it from the DOM element.

문제 코드

원인

공식문서에 Unknown Prop Warning 키워드로 검색했을 때 나오는 내용을 보면 해당 오류가 발생하는 이유는 여러가지가 있다. 그 중 가장 근본적인 원인은 올바른 DOM attribute/property로 인식하지 않는 것을 React가 받아드리지 못한다는 것이다.

해결

간단하게 속성이름을 변경하면 된다. 나는 labelHidden → a11yLabel 로 변경했다. 오류 해결

공식문서 참고

Unknown Prop Warning – React

17. npm 설치 시 오류

16. Ref로 조건문 사용 시 주의

Unhandled Rejection (TypeError): Cannot read property 'getBoundingClientRect' of null

const getElementHeight = (ref) => {
  return ref ? ref.current.getBoundingClientRect().height : 0
}

위와 같은 오류가 발생한 이유는 ref.current가 아닌 ref 객체로 조건문을 true/false로 만들었기 때문이다.

ref객체의 요소가 담기는 속성은 current 속성이기 때문에 ref객체로 조건문을 만들려면 ref.current를 사용하자.

15. 리액트 훅 규칙

Failed to compile.

src/components/SimpleSlice.js Line 8:22: React Hook "useTransition" is called in function "SimpleSlice.Container" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

상황

컴파운드 컴포넌트 내부에 useTransition을 사용하니 오류메세지가 떴다.

원인 추론

Hook의 규칙을 지키지 않아서 생신긴 문제인 것 같은데 정확한 원인은 파악하지 못함.

해결

컴파운드 컴포넌트가 아닌 일반 독립적 컴포넌트로 사용하니 오류 해결

14. 너무 많은 리렌더

Too many re-renders. React limits the number of renders to prevent an infinite loop.

<Item
    onClick={handleOpenCloseAccordion(isShow)}
>

상황

이벤트 함수를 바인딩 한 상황에서 너무 많은 re-renders 문제가 있다는 오류가 떴다.

원인

위의 코드 구문을 잘 보면 함수 참조가 아닌 함수 실행 구문이다. 그렇기 때문에 클릭 이벤트 발생 시에 함수가 실행되는 것이 아닌 React 요소가 렌더링 될 때마다 함수가 실행된다. 그래서 너무 많은 re-renders 문제가 발생한 것이다.

해결

콜백 함수를 사용해서 클릭 이벤트가 발생 될 때 함수가 실행되도록 한다.

<Item
    onClick={() => handleOpenCloseAccordion(isShow)}
>

13. import 다시 확인하기

classNames를 사용하려는데 계속 오류가 났다. 뭐가 문제인지 모르는 상태에서 문법이 틀렸는지 확인해봤는데 문제는 import 방식에 있었다.

classNames는 기본 가져오기로 가져와야한다.

import classNames from 'classnames'     [O]
import { classNames } from 'classnames' [X]

Object(...) is not a function

12. Provider undefined

만약 아래와 같이 Provider 속성을 찾을 수 없다고 한다면 Context의 이름이 제대로 맞는지 확인하자. 아래 이미지에서 <Message.Provider>이 아닌 <MessageContext.Provider>이 맞다. (내보내기를 MessageContext로 내보냄)

Error: Cannot read property 'Provider' of Exercise.js

Cannot read property 'Provider' of undefined

11. propTypes

Warning: Failed prop type: AppHomeLink: prop type wrapperProps is invalid; it must be a function, usually from the prop-types package, but received object.

AppHomeLink.propTypes = {
  wrapperProps: {
    as: 'h1',
  },
}

속성의 기본값을 설정한다는 것이 propsTypes로 설정을 해버렸다. 그래서 생긴 오류이다.

defaultProps로 변경하여 오류 해결!

AppHomeLink.defaultProps = {
  wrapperProps: {
    as: 'h1',
  },
}

10. 파이어 베이스 공급자

공급해야할 공급자가 없어서 생기는 오류이다. 아래 이미지를 보면 signInWithPopup()에 아무것도 전달 지 않아서 생긴 오류이다.

아래와 같은 오류가 보인다면 내가 전달해야할 것을 놓치진 않았는지 다시 디버깅 해보자.

The error you provided does not contain a stack trace.

9.

➜  ediya-ui-practice git:(master) npm start

> cra-template-ko-craco@1.0.3 start
> craco start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/yamoo9/Projects/EUID-mentoring/__PRACTICE__/React_mini_project_part1.begin/ediya-ui-practice/node_modules/webpack (version: 4.44.2) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/yamoo9/Projects/EUID-mentoring/__PRACTICE__/React_mini_project_part1.begin/ediya-ui-practice/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code 1
npm ERR! path /Users/yamoo9/Projects/EUID-mentoring/__PRACTICE__/React_mini_project_part1.begin/ediya-ui-practice
npm ERR! command failed
npm ERR! command sh -c craco start

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yamoo9/.npm/_logs/2021-02-22T15_48_46_421Z-debug.log
➜  ediya-ui-practice git:(master) ✗

8. variable shadowing

아래와 같은 오류는 variable shadowing 문제이다. 한 영역에서 같은 변수 명을 사용하면 안된다. 그래서 아래의 오류 메세지를 보면 message라는 변수가 이미 정의된 적이 있다는 것이다.

Identifier 'message' has already been declared

위와 같은 상황에서는 별칭(Alias) 등록을 해준다. 아래와 같은 문법으로 등록해주면 된다.

const { style, message, ...props } = this.props;
const { message: contextMessage, changeMessage } = this.context;

console.log(contextMessage);

7. render 내부 코드의 문제

아래와 같은 오류가 뜨는데 도대체 뭐가 문제 일까? 설명이라고 해준 코드를 보아도 react-dom 내부의 코드이니 문제를 알길이 없다. 하지만 아주 작은 곳에서 문제를 발견했다. 그것은 오타.

TypeError: render is not a function

React의 컨텍스트 실습을 하다 만난 오류 였는데 .Provider를 입력하지 않아서 생긴 문제이다.

다음부터 이와 같은 오류를 만난다면 render 함수 안의 코드에 틀린 부분은 없는지 다시 살펴보자.

6. 해당 경로에서 파일을 찾을 수 없다.

아래와 같은 오류가 뜬다면 import로 불러온 컴포넌트의 경로를 잘 살펴 보자. 설정한 경로에서 컴포넌트를 찾지 못하는 경우 이런 오류가 뜬다..

Failed to compile

./src/Components/Lecture.js

Module not found: Can't resolve '../LectureComponent' in '/Users/yamoo9/Projects/EUID-mentoring/PRACTICE/React_Master/react-examples/src/Components'

5. 컴포넌트 구성 전

아래와 같은 오류가 뜬다면 확인하기

컴포넌트의 대/소문자가 틀리지 않았는가?
export/import를 완료 했는가?

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

4. 루트 요소는 하나

아래와 같은 오류가 뜬다는 것은 return의 루트 요소가 하나 이상이라는 뜻이다. 이때 해결 방법을 참고하여 해결한다.

Adjacent JSX elements must be wrapped in an enclosing tag

3. 사용하지 않는 속성

현재 작업에서 FEML_lecturers라는 속성이 사용되지 않았기 때문에 아래와 같은 경고 메세지가 뜬것이다. 오류는 아니다. 그저 경고일 뿐이다. 참고하라는 말로 받아들이면 된다.

./src/App.js Line 4:7: 'FEML_lecturers' is assigned a value but never used no-unused-vars

2. 요소 개행 시 () 사용하기

22번 라인에 보면 ; 세미콜론이 포함되어 있다. 이 것 때문에 오류가 된것이다. ()로 <p> 요소를 묶어주지 않았기 때문에 return으로 작업이 끝난 것인줄 알고 prettire 확장이 적용한 것이다. 그래서 React를 사용할 때 prettire에 세미 콜론이 자동으로 없어지도록 설정하기도 한다.

Line 22:8: Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error.

1. 리스트의 key 설정

React에서 리스트 렌더링을 할 때, 각 아이템이 고유한 식별자를 갖고 있어야 한다.

index.js:1375 Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using . See https://fb.me/react-warning-keys for more information. in li (at src/index.js:12)

Previous실수 노트 Next넷플릭스 프로젝트

Last updated 4 years ago

Was this helpful?