[리액트] JSX 정의(react.createElement), 장점, 사용법(중괄호{})

-JSX 정의

자바스크립트 문법 확장한 것

javascript+ xml/ html

 

-JSX 코드

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

대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드

 

- React.createElement 함수

: JSX코드를 JavaScript 코드로 변환함.

- jsx는 html의 <h1>,</h1>을 사용하고 있음.

 

-createElement의 파라미터

 

-type(유형)
-[props](속성)
-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)

 

 

즉, react에서 jsx를 쓰는 것이 필수는 아님!
createElement함수를 사용하면 되기 때문임.
하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐.

 

 

- JSX의 장점

1. 가독성이 좋아 버그찾기 쉬움

JSX사용한 것: HTML의 <div> 사용

JSX 사용안한 것: div는 type, null은 props, hello,${name}은 children

 

3.injection attacks 방어

reactdom은 렌더링 전 임베딩된 값을 모두 문자열로 변환. 따라서, 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다. 

 

-JSX 사용법

1) 기본: HTML 사용하다가 JavaScript코드 사용하고 싶으면 중괄호!{}

 

{name} name이라는 javascript 변수 참조하기 위해서 / {formatuser(user)} formatuser라는 함수 호출하기 위해

 

2) html 중간이 아닌 태그의 속성에 값을 입력하고 싶을 때: 큰따옴표 사이에 문자열 넣기

3) 자식(children)정의하는 방법: html처럼 상위 태그가 하위태그를 둘러싸도록 함.

div태그의 children은 h1, h2 태그임.