JSX

• JavaScript를 확장한 문법으로, JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해준다.

JSX 규칙

1. 하나의 루트 엘리먼트로 반환하기

• 한 컴포넌트에서 여러 엘리먼트를 반환하려면, 하나의 부모 태그로 감싼다.

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

• <>, </>: Fragment
  • Fragment는 브라우저 상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해준다.

2. 모든 태그 닫아주기

• JSX에서 태그를 명시적으로 닫아야 한다.
• <img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야 하며, <li>oranges와 같은 래핑 태그도 <li>oranges</li> 형태로 작성해야 한다.

3. 대부분 Camel-Case로 작성하기

• JSX는 JavaScript로 바뀌고 JSX에서 작성된 속성은 JavaScript 객체의 키가 된다.

중괄호가 있는 JSX안에서 자바스크립트 사용하기

따옴표로 문자열 전달

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

중괄호 사용 가능 위치

1. JSX 태그 안의 문자

• <h1>{name}'s To Do List</h1>는 작동하지만, <{tag}>Gregorio Y. Zara's To Do List</{tag}>는 작동하지 않는다.

2. = 바로 뒤에 오는 어트리뷰트

• src={avatar}는 avatar 변수를 읽지만 src="{avatar}"는 "{avatar}" 문자열을 전달한다.

이중 중괄호로 객체 전달

• JSX에는 문자열, 숫자 및 기타 JavaScript 표현식뿐만 아니라 객체를 전달할 수도 있다.
• 객체는 { name: "Hedy Lamarr", inventions: 5 }처럼 중괄호로 표시되므로 JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}와 같이 다른 중괄호 쌍으로 객체를 감싸야 한다.

export default function TodoList() {
  return (
    <ul style={
    	{
          backgroundColor: 'black',
          color: 'pink'
    	}
	}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}