Parsing error: Unterminated JSX contents. 해결 방법

 

이번 글에서는 Parsing error: Unterminated JSX contents. 에러 해결 방법에 대하여 알아보겠습니다.

 

Parsing error: Unterminated JSX contents.

 

 

[에러가 발생한 코드]

import React from 'react'; 

function App() { 
    return ( 
        <input> 
    ) 
} 

export default App;

 

 

[에러 원인]

JSX에서는 위 코드처럼 태그를 닫지 않으면 오류가 발생합니다. 위의 input 태그는 열려있지만 닫혀있지 않고 있습니다.

 

[해결 방법]

태그를 닫아주시면 됩니다. 위의 코드에 input 태그 사이에 별도의 내용이 들어가지 않은 경우에는 <input /> 처럼 작성할 수 있습니다. 이러한 태그를 self-closing 태그라고 부릅니다. 태그를 선언하면서 동시에 닫을 수 있는 태그입니다.

import React from 'react'; 

function App() { 
    return ( 
        <input/> 
    ) 
} 

export default App;