jsx마크업,jsx안에서 자바스크립트 사용하기

• 컴포넌트에서 렌더링 로직과 마크업을 한번에 표현하여 return
• 하나의 부모 태그로 감싸야하며 부모태그를 쓰지않을 경우 <> </> 프레그먼트 사용
• jsx내부에서 여러 객체를 하나의 배열로 감싸서 return하는 것과 같음
• self closing 태그도 <br /> <img /> 형태로 닫아야함
• 태그 속성명은 카멜케이스이며 예약어인 경우 className, htmlFor 사용

예제) html을 jsx로 변환하여 TodoList컴포넌트 만들기

<h2>Hedy Lamarr's Todos</h2>
<img src="https://i.imgur.com/yXOvdOSs.jpg" alt="" class="photo">
<ul>
  <li>새로운 신호등 발명</li>
  <li>영화 장면 리허설</li>
  <li>스펙트럼 기술 개선</li>
</ul>
<div class="checkbox_wrap">
  <input id="check1" type="checkbox">
  <label for="check1">체크박스</label>
</div>

 

=> 이 html을 jsx로 변환하면?

import './App.css';

export default function TodoList() {
  return (
    <>
      <h2>Hedy Lamarr's Todos</h2>
      <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="" className="photo" />
      <ul>
        <li>새로운 신호등 발명</li>
        <li>영화 장면 리허설</li>
        <li>스펙트럼 기술 개선</li>
      </ul>
      <div className="checkbox_wrap">
        <input id="check1" type="checkbox" />
        <label htmlFor="check1">체크박스</label>
      </div>
    </>
  );
}

 

jsx에서 자바스크립트 사용

• 동적인 값은 {}로 전달
• src와 alt 동적으로 지정
• 객체 전달시 {{}} 이중 중괄호 사용
• css속성명의 -는 자바스크립트 연산자이므로 카멜케이스여야함