[react] jsx

const element = <h1>Hello, world!</h1>;

jsx

javascript 를 확장한 문법이다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React “엘리먼트(element)” 를 생성합니다. 다음 섹션에서는 DOM에 어떻게 렌더링하는지 알아보겠습니다. 아래를 보면 JSX를 시작하기 위해 필요한 기본사항을 찾으실 수 있습니다.

리액트라는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 리액트는 jsx사용이 필수는 아니지만,UI 관련 작업ㅇ을 할 때 시각적으로 도움이 된다고 생각합니다.

JSX 사용하기

어떤 프레임워크를 이용해 웹앱을 만들든 가장 중요한 것은 최종 결과가 HTML, CSS, JS의 조합이어야한다는 것이다.
리액트로 개발할때 상당 부분을 JSX코드로 작성한다. 하지만 JSX는 공식적인 JS 문법이 아니기 때문에 브라우저는 JSX를 이해하지 못한다. 때문에 리액트로 개발할 때에는 JSX를 브라우저가 이해할 수 있는 평범한 자바스크립트로 변환할 방법이 필요하다.

Node.js와 그 외 빌드 툴로 개발환경을 구축하여 리액트로 개발하기

• 빌드 툴을 이용해 JSX로 작성된 코드들이 JS로 변환되며, 다른 일반적인 JS 파일처럼 참조할 수 있도록 변환된 파일이 디스크에 저장된다.
• 런타임시 브라우저가 JSX를 JS로 자동 변환하게 해주는 방법
  : CDN을 이용하는 방식으로, 일반 JS처럼 JSX를 직접 지정하면 브라우저가 알아서 처리한다.
  브라우저가 실행될때 CDN으로 연결한 스크립트 파일 하나만 참조하고, 그 스크립트 파일은 페이지가 로딩될 때 JSX를 JS로 변환한다.