함수형 컴포넌트엔 왜 import react를 하는가?

개요

함수형 컴포넌트로 쓴 리액트 코드를 보면
react 라이브러리를 import 하는걸 보게되는데
실제 코드에선 React를 쓰는걸 볼수없어서

궁금해서 한번 찾아보게 되었다, 이유는 간단하다

1.  import React from 'react';

function Hello() {
  return (
    <div >
      안녕하세요 
    </div>
  );
}


export default Hello;

위에 코드를 보면 함수형 컴포넌트에서
import react를 하지만

구현부 코드에서는 React 변수를 쓰는것을 확인할수없다
하지만 1번 줄을 지우면 코드가 작동이 안된다.
그럼 해당 코드에서React를 어디서 쓰는걸까??

원인

이건 jsx때문이다.
실제 jsx -> js를 babel 로 변환하게 되면

import React from 'react';

function Hello() {
  return /*#__PURE__*/React.createElement("div", null, "\uC548\uB155\uD558\uC138\uC694 ", name);
}

export default Hello;

해당 코드를 볼수있다.
즉 바벨이 jsx->js로 변환하게 되고
해당 js파일에서 jsx로 쓴 컴포넌트를
React.createElement로 dom을 생성하기 때문에

React함수를 import를 해야한다 끝!