리액트 : JSX

JSX :

리액트에서 사용하는 자바스크립트 확장 문법이다.

JSX 문법 :

1. 변수에 아래와 같이 저장 가능

const hi = <p>Hi</p>;

2. JSX내부에서 자바스크립트 실행 가능

<h1>{name}님, Welcome to Wecode!</h1>;

3. JSX 속성(attribute)는 camelCase로 작성한다.
   
   
4. 직접 이벤트 핸들러를 부여할 수 있다.

<h1 className="title" onClick={handleClick}>Welcome to Wecode!</h1>

5. 인라인 스타일링(Inline Styling)은 객체로 받는다. (성능 안좋음)

<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

6. 모든 태그는 셀프 클로징 태그 가능!

<div />

7. Nested JSX (최상위 감싸는 태그 필수!)
   
   
8. React.Fragment : 마땅히 감쌀 태그 없을때 사용