import React from 'react'

import React에 대해서 알아보자🔥

React 프로젝트를 시작할 때, 최상단 부분에서 많이 보여지는 import React from 'react' 코드가 있다. 이 코드는 React 라이브러리에서 React 객체를 가져와 사용하기 위한 코드이다.
이 코드는 JSX 문법을 사용하여 리액트 컴포넌트를 작성할 때 필요한 기능을 제공한다.

여기서 JSX 란?

---

자바스크립트 확장 문법이며 리액트로 코드를 작성할 때 HTML 문법과 비슷한 문법이며 더 편리하게 화면에 나타낼 코드를 작성할 수 있게된다.

React 에서 JSX 문법으로 작성하고 나면 번들을 이용하여 자바스크립트로 변환하여 클라이언트(브라우저)가 읽게되어 나타나게 된다.

리액트 컴포넌트를 생성하고 관리하기 위해서는 React 객체가 필요하므로 프로젝트의 최상위에서 import React from 'react'를 선언해야 한다. 이러한 코드는 React 17 버전부터 사용하지 않게 되었다. 17 버전 이후로 자동으로 React 객체를 인식하기에 사용하지 않고 작성할 수 있게 되었다. 그렇게 진행됨에 따라 코드의 가독성이 향상되고 편리한 리액트 애플리케이션의 제작이 가능해졌다.

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속성 , 시멘틱 태그안에 들어갈 글귀 요렇게 나뉘는데

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