[프로그래밍] React에서 ESLint를 사용할 때 발생하는 오류

문제 발생 이유

2020년 9월 22일, React의 JSX 문법이 업데이트 되면서

ESLint가 이에 대한 업데이트를 아직 진행하지 않았다.

 

React 17 버전에 대한 공식 문서 내용

Babel과 협력하여, 새롭게 재 작성된 JSX 변형 버전을 제공한다.

React를 가져오지 않고도 JSX를 사용할 수 있다.

( import React from 'react'; 안해도 됨 )

번들 크기가 약간 늘어났다

기존의 JSX문법은 계속지원한다. 

------------------------------------------------------------------------------------

// 기존의 방식

  JSX를 사용할때, 컴파일러가 이를 브라우저가 이해할수 있는 React 함수 호출로 변환한다.

  이전 JSX변환은 JSX를 React.createElement(...) 으로 변경했다.

// JSX를 작성하면

import React from 'react';

function App() P
  return <h1>Hello World</h1>;
}


// javascript로 바꿔줌

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}


// React.createElement를 사용하므로, React 모듈을 필수적으로 불러와야했다.

// createElement함수는 최적화가 비효율적이였다.
------------------------------------------------------------------------------------

// 새로운 버전

  Babel, TypeScript와 같은 컴파일러만 사용하도록 설계된 React 패키지에 대해, 두 가지 방법을 사용한다

// JSX 작성

function App() {
  return <h1>Hello World</h1>;
}


// javascript로 바꿔줌

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', {children: 'Hello world});
}

------------------------------------------------------------------------------------