TIL 36. React 코드 오류 정리

Mission: React 코드 오류 정리 및 해결 방법

1) react-dom.development.js:86 Warning: React does not recognize the "isVisible" prop on a DOM element.

• isVisible 프로퍼티가 DOM 요소에 인식되지 않기 때문에 발생한다. 이를 해결하기 위해서는 해당 프로퍼티를 사용하는 컴포넌트에서 isVisible 대신 isvisible로 소문자로 변경하거나, isvisible={value}와 같이 값을 명시적으로 전달하면 된다.

2) react-dom.development.js:86 Warning: Received false for a non-boolean attribute "isfixed".

• 해당 오류는 "isfixed"라는 boolean 속성이 아닌 속성에 false 값을 전달하여 발생한다. 이를 해결하기 위해서는 해당 속성을 boolean 속성으로 사용하고자 할 때는 isfixed={true} 또는 isfixed="true"와 같이 true 값을 전달해야 한다. boolean 속성을 사용하지 않을 때는 해당 속성을 제거하거나 undefined를 전달한다.

3) Received "false" for a non-boolean attribute "isVisible".

• 해당 오류는 "isVisible"라는 boolean 속성이 아닌 속성에 false 값을 문자열로 전달하여 발생한다. 이를 해결하기 위해서는 해당 속성을 boolean 속성으로 사용하고자 할 때는 isVisible={true} 또는 isVisible="true"와 같이 true 값을 전달해야 한다. boolean 속성을 사용하지 않을 때는 해당 속성을 제거하거나 undefined를 전달한다.
  

4) TypeError: Cannot read property 'value' of undefined

• 해당 오류는 undefined 또는 null 값을 가진 객체나 배열 등에서 value 프로퍼티를 읽으려고 할 때 발생한다. 이를 해결하기 위해서는 해당 객체나 배열이 null 또는 undefined인지 확인하고, 유효한 값을 가지고 있는지 확인한 후에 value를 사용해야 한다. 예를 들어, object?.value와 같이 옵셔널 체이닝 연산자를 사용하거나 조건문을 활용하여 오류를 방지할 수 있다.

5) SyntaxError: Unexpected token '<'

• 해당 오류는 일반적으로 JSX 문법이 JavaScript 파일에서 인식되지 않을 때 발생한다. 이를 해결하기 위해서는 JSX 문법을 사용하려는 파일의 확장자를 .jsx로 변경하거나, JSX를 사용하는 파일에서 JSX 문법을 올바르게 작성해야 한다. 또한, JSX 문법을 사용할 때는 React 라이브러리를 import하여 사용하는 것을 확인해야 한다.