jsx2 [React 리액트] JSX 간단 문법 JSX : 자바스크립트와 HTML을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법 : HTML의 태그를 그대로 사용할 수 있음 1) 속성을 추가하는 경우, HTML에서는 class를 사용하지만 JSX에서는 className을 사용해야함 Why? 자바스크립트에서는 객체지향의 개념으로 class라는 키워드를 사용하기 때문! 2) for라는 속성도 그대로 사용 불가! JSX에서는 htmlFor을 사용해야함 Why? HTML에서는 label 태그와 함께 쓰이지만 자바스크립트는 반복문에 for라는 키워드를 사용하기 때문! 3) eventhandler의 이름도 다름 onblur / onfocus -> onBlur / onFocus 와 같이 camelCase로 사용해야함 4) JSX로 HTML 태그를 작성할 때는 반.. 2022. 8. 10. [React 리액트] JSX의 개념 / 역할 / 장점 / 사용법 JSX 개념 - A syntax extension to JavaScript 자바스크립트의 확장 문법 - JavaScript + XML/HTML JSX 역할 - 내부적으로 XML/HTML 코드를 JavaScript로 변환하는 역할(리액트의 createElement()함수가 이 역할을 함) JSX 장점 - 코드 간결 - 가독성 향상 - 보안성 향상(Injection Attack이라 불리는 해킹 방법을 방어) JSX 사용법 - 기본적으로 모든 자바스크립트 문법 지원 - 자바스크립트에서 XML/HTML 섞어서 사용 - 중괄호를 사용하여 자바스크립트 코드를 삽입 ex/ {`이 블로그의 이름은 ${props.name}입니다.`} 2022. 6. 27. 이전 1 다음