2021.02.17 / React - JSX

JSX

자바스크립트 문법의 확장판으로 마치 자바스크립트와 HTML을 한 번에 합쳐 놓은 것 같은 문법이다.

 

1. Nested Element

 - 모든 JSX의 코드는 container element 안에 포함해야 한다.

 - 무언가로 감싸야만 코드가 정상적으로 작동한다.

 

2. JavaScript Expression

 - JS를 표현하려면 {}로 wrapping 하면 된다.

 

3. Inline Style

 - style을 설정할 때는 key가 camelCase인 객체가 사용된다.

 

4. Comments

 - 주석을 작성할 때는 { /*...*/ } 형식으로 작성한다.

 - 주의할 점은 주석 역시 container element 안에 작성되어야 한다.

 

See the Pen react-first by 김혜지 (@hjyee) on CodePen.

 

 

참고

- www.youtube.com/watch?v=kjnVKNmT_xE&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=3

- www.youtube.com/watch?v=5MF-ThMob-s&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC&index=5

- react-anyone.vlpt.us/03.html