[React] jsx 함수형 기본구조 : import React from "react"는 왜 쓸까?

 

import React from "react";

const Closet = () => {



    return(
        <div>

        </div>
    );
}


export default Closet;

 

브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해주어야 한다.

 

리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transfomer를 사용해 JSX로 작성된 React 메소드를 변환시킨다.

 

이 때 객체인 React를 가져오기 위해서 import React from 'react'를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다.

 

추후 바벨이라는 웹팩을 통해 React를 유효한 JavaScript로 변환할 수 있도록 해준다.

 

만약 상위 컴포넌트에서 import React from 'react'를 작성했다면 중복 코드 방지용으로 생략해도 된다.

 

 

 

참고

import React from ‘react’는 왜 쓰는 걸까?