React

JSX <-- ex01

화이팅하자9 2023. 12. 4. 15:50

JSX
  JS에 XML을 추가한 확장문법
  하나의 파일에 HTML과 JS를 동시 작성
  -> document 객체 별도 접근 x
  -> 가독성이 좋고 기능별 분류가 쉬움

아무것도 안묶어주면 에러가 나타난다.
묶어주면 에러가 사라진다.

JSX 작성규칙
  (1) 여러 요소가 있다면 부모 요소로 감싸기
  (2) div가 아닌 <> </>로도 가능
  (3) return문 안에서 JS 표현식 사용 가능 : {}사용

(4) 표현식 안에서 if문 사용불가 -> 삼항연산자로 대체 : ===
(4-1) 조건이 하나일때 &&

 

(4-2) 조건이 참,거짓일때 ->  조건 ? T : F

(4-3) 조건이 여러개일때 -> return문 위에서 if문 사용

const userName을 바꿔줌에 따라 text의 값이 바뀌게 된다.