[React][Inflearn] 2. JSX (처음만난 리액트)

jsx란?
자바스크립트의 확장문법
a syntax extension to JavaScript

JavaScript + XML/HTML

element라는 변수에 h1 tag를 대입

create element의 역할

JSX를 사용한 코드와 사용하지 않은 코드의 비교

JSX는 파라미터는 뭐가 들어갈까

1. 엘리멘트의 유형
2. 프롭스
3. 현재엘리먼트가 포함하고 있는 자식 엘리먼트

리액트에서 jsx가 필수는 아니지만
jsx를 사용하면 장점이 많기에 편리함

JSX의 장점

1. 코드가 간결해짐

2. 가독성 향상
   유지보수에도 좋음
3. 버그수정 굿
4. injection Attacks 방어
   1. 의도하지 않은 코드를 입력받고 실행하게 하여 해킹등의 공격을 진행하는것

기본적으로 리액트돔은 렌더링 하기 전에 임베딩된 값을 모두 문자열로 변환함
때문에 명시적으로 선언되지 않은 값은 괄호사이에 들어갈수없다.
-> XSS attack 방어 가능

JSX 사용법
기본적으로 모든 JS 문법을 지원함 추가로 xml html섞어서 사용

XML/HTML 사용하다가 중간에 자스 쓰고 싶으면 중괄호를 사용하도록 하자...

ex)

그렇다면 html tag 중간이 아닌
속성에 js를 넣고 싶다면?

자식을 정리하는 방법

div의 children은 h1,h2이다..!! 가독성 간결함 채고~

!!!!!! '가 아니라 ₩를 사용해야 하는 경우가 있더라 props !!!!!

terminal 제 위치에서 npm start 안하면 오류남 ㅋㅋ;;