JSX

React] JSX란

JSX const elemnt = Hello, world!위의 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하여 JavaScript를 확장한 문법입니다. JSX는 JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 렌더링 로직이 UI로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. UI로직 이벤트가 처리되는 방식,시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 JSX에 표현식 포함하기 아래 예시에서는 name이라는 변수를 선언 후 중괄호로 감싸 JSX안에 사용하였습니다. c..

리액트 17버전 이상부터 React를 import 하지 않아도 되는 이유

JSX Transform은 무엇인가? 브라우저는 JSX를 알아듣지 못하기 때문에 대부분의 리액트 사용자는 바벨 또는 타입스크립트와 같은 컴파일러에 의존하여 JSX 코드를 일반 자바스크립트로 변환합니다. CRA 또는 Next.js와 같은 사전 구성된 많은 설정에는 JSX Transform도 포함되어 있습니다. JSX Transform의 달라진 점은? JSX를 사용할 때, 브라우저가 리액트 함수를 이해하도록 컴파일러가 transform 해줍니다. 이전 JSX Transform은 JSX를 React.createElement(...)호출로 변경였습니다. import React from 'react'; function App() { return Hello World; } 이전 JSX버전에서 JS로 변경하는 것은 ..