JSX

JSX

•  JavaScript + XML의 합성어

• 자바스크립트 확장 문법으로 XML 과 유사

• 바벨을 이용해 일반 자바스크립트 코드로 변환

 

 

JSX 문법 정리

1. 전체는 하나의 태그로	html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로!
html with JS	html를 작성하다가 중간에 js문법을 사용하고 싶을 때는 {중괄호}로 감싸야 합니다. 단, for문과 if 문은  return 내부에서 사용할 수 없고, 삼항 연산자를 사용해야 함
인라인 style 적용	• CSS 를 인라인 형태로 적용할 때는 {object}형태로 저장해야 함 • CSS 속성은 dash-case →camelCase • 그 덕분에 인라인으로 작성된 정보를 따로 {} 객체 형태로 빼내어 변수화하는 게 가능함
기존과 다른 속성명	class 대신 className, onclick대신 onClick 을 사용합니다.
closing tag	opening tag(빈태그)도 closing tag가 없이는 존재할 수 없다.
내부 주석 사용은 가능함	주석은 {/* 이렇게 씁니다!*/}

 

리액트의 디버깅

 

• 기존 JavaScript 에서는 에러를 확인하기 위해서 console창으로 봐야하지만, React 는 치명적인 버그일 경우에 화면에 바로 띄워줍니다.

• JS의 문제점을 보완하고자 strict mode 강제!