package.json에는 리액트에 관련된 두 가지 의존성(dependencies)이 있습니다.
react와 react-dom입니다.
index.js 파일에서 react-dom을 사용하고 있습니다.
하지만 어디서든 react를 사용하고 있진 않습니다.
이것은 사실 create-react-app으로 만든 모던 리액트에서만 사용되는 프로젝트 셋업에서만 사용됩니다.
다른 많은 리액트 프로젝트에서는 실제로 react를 import 하는 것을 볼 수 있습니다.
옛날에 다른 리액트 프로젝트에서는 React로부터 React를 import 해야 했기 때문입니다.
JSX는 실제로 React 객체에 호출되는 두 가지 메서드로 변환됩니다.
따라서 JSX를 사용하는 모든 파일에서 해줘야 했습니다.
import React from 'react';
return (
<div>
<h2>Let's get started!</h2>
<Expenses items={expenses} />
</div>
);
위에 JSX는 아래 코드로 나타낼 수 있습니다.
우리가 JSX를 사용할 때 자동으로 생성되는 배후의 코드입니다.
JSX로 작성한 코드에 비해 읽기도 어렵고 이해하기도 쉽지 않습니다.
현재 사용되는 리액트 프로젝트에서는 import React from 'react';를 사용하지 않아도 되지만 JSX코드를 사용할 때 배후에서 React가 여전히 사용되고 있다는 걸 강조하기 위해서 사용하고 있습니다.
return React.createElement(
'div',
{},
React.createElement('h2', {}, 'Let's get started!'), React.createElement(Expense, {items: expense})
);
// 첫 번째 인수는 만들어야 하는 요소
// 두 번째 인수는 이 요소를 설정하는 객체
// 세 번째 인수는 시작 및 종료 태그 사이에 들어갈 콘텐츠
vite를 사용하여 프로젝트를 생성할 때도 왜 매번 import React from "react"; 되는지 몰랐었는데 궁금증이 해결되었습니다.