<aside> 💡 import React에 대해서 알아보자

</aside>

React 프로젝트를 시작할 때, 최상단 import 부분에서 많이 보여지는 import React from ‘react’ 부분이 있다.

이 부분은 React 라이브러리에서 React 객체를 가져와 사용하기 위한 코드이다.

이 코드는 JSX 문법을 사용하여 리액트 컴포넌트를 작성할 때 필요한 기능을 제공한다.

리액트 컴포넌트를 생성하고 관리하기 위해서는 React 객체가 필요하므로, 프로젝트의 최상위에서 import React from ‘react’를 선언해야 한다.

이러한 코드는 React 17 버전부터는 import React from ‘react’를 작성하지 않아도 된다는 것이다.

이전 버전에서는 JSX 문법을 사용하기 위해 React 객체를 가져와야 했지만, React 17 버전부터는 자동으로 React 객체를 인식한다.

따라서, React 17 버전 이상을 사용하는 프로젝트에서는 import React from ‘react’를 사용하지 않아도 된다.

17 버전 이하에서는 컴포넌트를 렌더링 할 때 React.createElement 를 사용해야 했지만 17 버전 이상부터는 JSX 문법만으로 컴포넌트를 작성할 수 있기에

코드의 가독성이 향상되고 개발자들의 편리한 리액트 애플리케이션의 제작이 가능하다.

17 버전 이전

import React from 'react'

return React.createElement(
    'div',
    {},
    React.createElement('h2', {}, `Let's get started!`),
    React.createElement(Expenses, {items : items})
)

17 버전 이후

return (
    <div>
      <h2>Let's get started!</h2>
      <Expenses items={items} />
    </div>
);

위 코드는 같은 코드로 작성했는데 createElement 에는 인자로 시멘틱 태그 , HTML속성 , 시멘틱 태그안에 들어갈 글귀 요렇게 나뉘는데

속성 같은 경우 객체로 받아야하기에 {} 중괄호가 필요하다.