HTML이 JS와 CSS를 가져올 필요없다. JS안에 HTML,CSS 가 있다면
밈 출처: https://medium.com/@mdazmainamin/brushing-up-on-react-how-to-bootstrap-react-49eb3f6ab036
❄️ JSX 는 무엇인교?
JSX 는 JavaScript XML의 줄임말로,
JavaScript의 일부를 확장한 문법이며, React에서 UI를 구성할 때 사용한다. 이를 활용하여 우린 React 컴포넌트를 만들 수 있다.
리액트는 실제 DOM을 조작하는 것이 아닌 가상 DOM을 조작하는 방식으로 UI를 생성하는데, 실제 DOM을 조작하는 것이 아니기 때문에 불편한 자바스크립트를 굳이 사용하지 않아도 되는 것이다
좀 더 개발자가 한 눈에 엘리먼트들을 보기 쉽고 코드를 작성하기 쉽게 하기 위해 리액트 개발자들은 JSX라는 새로운 문법을 만들어 냈다.
이 JSX는 HTML, CSS, JS로 구조, 스타일, 동작 등을 구분했던 (구) 프론트엔드 프로그래밍에 삼권분립을 하나의 JS (JSX) 파일로 작성할 수 있도록 만들었다.
위 그림처럼 HTML의 XML 형식이 자바스크립트 안으로 들어왔다.
JSX의 컴파일
JSX는 자바스크립트가 아니다 보니 브라우저에서 바로 실행할 수는 없습니다! JSX를 실행하기 위해서는 브라우저가 이해할 수 있는 JS코드로 변환을 해주어야한다.
"Babel" 의 등장
이때 "Babel" 이라는 자바스크립트 컴파일러가 JSX를 자바스크립트로 변환해줍니다.
빠르게 진화하는 프론트엔드 생태계 안에서 최신 브라우저도 지원하지 못하는 문법과 여러 기술들이 많은데 (ESNext, typescript, JSX 같은)
이 바벨이라는 놈은 신통하게도 새로운 ESNext 문법을 기존 브라우저가 인식할 수 있도록 변환해주는 역할을 하게 됩니다.
주요 JSX 문법
대충 JSX 가 어떠한 놈인지 알아보았으니, 이 친구를 어떻게 작성해야하는지 간단히 살펴보자.
1. 엘리멘트의 태그는 하나의 최상위 태그로 감싸져야한다.
함수형 컴포넌트를 작성할 때 return 값을 잘 보면
return (
<div>
<div>
...//여러 Elements
<div>
<div>
)괄호와 최상위 엘리먼트 태그로 감싸져있는것을 확인 할 수 있다.
만약, 최상위 태그가 두개 이상일 경우 컴파일 에러가 난다.
2. JavaScript 표현식을 사용할 땐 중괄호를 사용한다.
엘리먼트 사이, 또는 속성에 지정할때, 자바스크립트의 변수나 함수를 사용하기 위해서는 중괄호 사이에 끼워넣어야한다.
그렇지 않으면, 일반 텍스트로 인식한다.
3. 컴포넌트 정의 할때 이름의 첫글자는 대문자여야한다.(Pascal-case)
정의된 컴포넌트는 첫글자가 대문자이어야만 컴포넌트로써 인식이 가능하다. App 컴포넌트에 코드를 보면 사용자 정의된 컴포넌트는 첫글자가 대문자이고 일반 DOM 엘리먼트는 소문자로 시작하는 것을 알 수 있는데, 만약 컴포넌트가 소문자로 시작할 경우 React 가상 DOM 은 이를 일반 엘리멘트로 파악하여 에러를 발생시킬 수 있다.
4. 엘리먼트의 클래스 지정시, className 을 사용한다.
HTML에 경우 어떤 엘리먼트에 클래스를 지정할때 class 를 사용했다면,
<div class="greeting">Hello!</div>JSX에 경우 클래스를 지정할 때 className를 사용한다.
<div className="greeting">Hello!</div>역할은 둘이 동이하고, CSS 선택자도 동일하게 동작한다.
5. 조건부 렌더링엔 삼항연산자를 사용
마찬가지로 Javascript를 엘리멘트에서 사용하기 때문에 중괄호 {} 로 감싸주어야 사용이 가능하다!
6. iterable 요소를 반복 출력할 땐 .map()을 이용한다.
map 메소드의 화살표 함수 이후 return 값을 엘리먼트 형태로 지정해주어야 한다!
{}를 생략하거나 return 키워드를 사용해야한다.
