[React] JSX (JavaScript XML)
·
WEB DEV
JSX (JavaScript XML)JavaScript 안에서 HTML 같은 문법을 쓸 수 있게 해주는 확장 문법HTML 처럼 보이지만 실제로는 JavaScript브라우저는 JSX를 직접 이해하지 못함- Babel 같은 Code Transformer가 JSX를 React.createElement 형태의 JavaScript 코드로 변환하는 식중괄호 {} 안에 변수나 함수 호출 결과 등을 넣을 수 있음JSX는 내부적으로 컴파일 될 때, 첫 글자가 소문자면 HTML 태그, 대문자면 React 컴포넌트로 취급함- 공식가이드에서도 컴포넌트는 PascalCase(대문자로 시작하는 단어 조합)로 작성할 것을 권장 React는 JSX 사용이 필수가 아니다.공식문서에서도 선택(optional)이라고 말하고 있다.하지만 ..
[React] 리액트 설치 없이 실습해보는 법(CDN 방식)
·
WEB DEV
React를 처음 공부할 때, CDN 방식, 개발환경 방식(번들러, npm) 두 가지가 있다. CDN 방식의 특징HTML 안에서만 임시로 React를 사용할 수 있음React, ReactDOM이 전역변수로 제공됨로컬(Mac)에는 아무것도 설치되지 않음 (기존 설치해 둔 Node.js, npm 미활용)HTML 파일을 열면 React가 실행되는 것처럼 보이지만, 사실은 CDN에서 받아온 JS를 실행하는 것 npm 설치 방식과의 차이npm 방식은 Node.js 환경에 React 패키지를 설치해서 프로젝트 내부에 node_modules/react 형태로 저장CDN 방식은 로컬에 설치 하지 않고, 실행할 때마다 네트워크를 통해 React 코드를 불러옴 리액트 React를 처음 경험/실습 해볼 때, 리액트 설치..