React - JSX 문법 간단 요약 정리

슬로그·2023년 1월 27일
0

React

목록 보기
3/12
post-thumbnail

JSX 문법

const h3 = React.createElement(
	"h3",
  	{
      id:"title",
      onClick : () => console.log("onClick !!!"),
      style:{
      	backgroundColor:"tomato"
      }
    },
  	"Hello World"
	const h3 = 
          <h3 id="title"
			onClick={() => console.log("onClick !!!")
			style={{backgroundColor:"tomato"}}
			}>
              Hello World</h3>

Babel은 JSX를 React.createElement() 호출로 컴파일 하게 된다.
위 두개의 예시는 동일하다.

(Babel 홈페이지도 동일하다)

📌 JSX 문법 규칙

  • javascript 를 확장한 문법
  • JSX 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다.
  • JSX를 작성할때는 camelCase 프로퍼티 명명 규칙을 사용한다.
  • 태그가 비어있다면 /> 이용해 닫아주는 것이 좋다.
  • 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.
  • JSX 내부에서는 if문을 작성 할수 없다. 그래서 삼항 조건 연산자로 대체할 경우 가능하다.
  • 삼항 조건 연산자 말고도 && 연산자를 사용하여 true와 false 일 때 간단히 코드를 작성할 수 있다.
profile
빨리가는 유일한 방법은 제대로 가는것

0개의 댓글