import React from ‘react’;

import React from 'react'; 코드를 작성하는 이유는 React 라이브러리를 가져와서 JSX를 컴파일할 수 있도록 하기 위해서입니다. 하지만 최근에는 이 이유가 변경되었습니다. 아래에서 각각의 이유를 설명합니다.

1. JSX 컴파일링

과거에는 JSX 문법을 사용하기 위해 React를 import 해야 했습니다. JSX는 자바스크립트 확장 문법으로, HTML과 유사한 구조를 가지며, 이를 자바스크립트로 변환하기 위해서는 React.createElement를 사용해야 했습니다. 따라서 import React from 'react'; 구문이 필요했습니다. Babel과 같은 도구가 JSX를 JavaScript로 변환할 때 React.createElement를 자동으로 호출하도록 설정되어 있었기 때문에, React를 import 해야 했습니다.

예제:

import React from 'react';

function Counter(props) {
    return (
        <div>
            count
        </div>
    );
}

export default Counter;

위 코드는 다음과 같이 변환되었습니다:

import React from 'react';

function Counter(props) {
    return React.createElement('div', null, 'count');
}

export default Counter;

2. React 17부터의 변화

React 17부터는 JSX 트랜스폼이 도입되면서 더 이상 React를 명시적으로 import할 필요가 없어졌습니다. 새로운 JSX 트랜스폼을 사용하면 Babel이 JSX를 변환할 때 자동으로 필요한 함수를 import합니다. 따라서, JSX를 사용하는 모든 파일에 대해 React를 명시적으로 import할 필요가 없어졌습니다.

새로운 트랜스폼 예제:

function Counter(props) {
    return (
        <div>
            count
        </div>
    );
}

export default Counter;

위 코드는 React 17과 새로운 JSX 트랜스폼을 사용하면 다음과 같이 변환됩니다:

// 컴파일러에 의해 삽입됨(직접 가져오지 마세요!)
import { jsx as _jsx } from "react/jsx-runtime";

function Counter(props) {
    return _jsx("div", {
        children: "count"
    });
}

export default Counter;

결론

import React from 'react';를 사용하는 이유는 JSX를 사용하기 위해서였지만, React 17과 새로운 JSX 트랜스폼을 사용하면 더 이상 필요하지 않습니다. 따라서 최신 프로젝트에서는 명시적으로 React를 import하지 않아도 JSX를 사용할 수 있습니다. 다만, 기존의 React 16 이하 버전이나 트랜스폼을 사용하지 않는 경우에는 여전히 필요합니다.

주의사항

프로젝트가 React 17 이하 버전을 사용하거나, 새로운 JSX 트랜스폼을 설정하지 않은 경우에는 여전히 import React from 'react';가 필요합니다. 이를 확인하려면 프로젝트의 설정과 React 버전을 확인하세요.

참고