[react] JSX 문법 3개

qwe8851·2022년 8월 12일
0

💎 React

목록 보기
2/37

1️⃣   html에 class넣을 땐 ClassName

jsx로 html을 짤때는 class=""가 아닌 className=""으로 써야함



2️⃣   변수를 넣을때는 {중괄호}

자바스크립트로 div안에 변수를 꽂아넣고 싶을때는
document.getElementById().innerHTML = ?? 이런식이지만 리액트에서는
<div>{ 변수명 }</div> 이렇게 중괄호 안에 데이터바인딩하고싶은 변수명만 담으면 됨



3️⃣   html에 syle속성 넣기

jsx에서는 sytle={}안에 {}자료형으로 넣어야 함

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>
  • {속성명 : '속성값'} 이렇게 넣으면 됨
  • 근데 font-size처럼 속성명에 대쉬가 붙은건 쓸 수 없음
    대쉬 대신 모든 단어를 붙여서 fontSize처럼 써야 함
profile
FrontEnd Developer with React, TypeScript

0개의 댓글