📌 정의

• JSX는 자바스크립트를 확장한 문법
• 자바스크립트 파일 안에 HTML과 유사한 마크업을 작성

📌 JSX: Javascript + HTML

• 웹은 HTML, CSS, JavaScript를 기반으로 만들어져 있다.
• 예전에는 각각 분리된 파일로 관리하고 로직도 분리되어 동작
  
• 웹이 점점 인터랙티브해지면서 로직이 컨텐츠를 결정하는 경우가 많아짐
  • React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있는 이유
    => 서로 관련이 있는 마크업과 렌더링 로직을 함께 그룹화
    

장점

• 버튼의 렌더링 로직과 마크업이 함께 존재하면 서로 동기화 상태를 유지할 수 있음
• 각 React 컴포넌트는 브라우저에 마크업을 렌더링할 수 있는 JavaScript 함수
• React 컴포넌트는 JSX라는 구문 확장자를 사용하여 해당되는 마크업을 표현
• JSX는 HTML과 비슷해보이지만 형태를 좀 더 엄격한 작성을 요구하며, 자바스크립트를 넣어 동적으로 정보를 표시할 수 있는 구문 확장 문법

📌 JSX 규칙

1. 단일 root 엘리먼트 반환

• 여러 엘리먼트를 반환할 때 하나의 부모 태그로 감싸줘야 함

💡 Fragment 태그

• <>와 </> 태그 또는 <Fragment>와 </Fragment> 태그
• 브라우저상의 HTML 트리 구조에 흔적을 남기지 않고 여러 개의 태그를 그룹화할 수 있음 (불필요한 <div> 추가 막기)

🌊 Deep Dive: 왜 여러 JSX태그를 하나로 감싸줘야 할까?

• JSX는 HTML처럼 보이지만 내부적으로는 자바스크립트인 컴포넌트 함수가 반환하는 '객체'
• 자바스크립트 함수에서 하나의 객체 또는 배열로 감싸지 않은 여러 개의 값은 반환 불가
  • 함수에서는 하나의 객체만 반환할 수 있음

2. 명시적 닫기 태그

• <div> 같은 wrapping 태그는 반드시 앞뒤로 닫아줘야 함 (<div></div>)
• 자체적으로 닫는 태그 뒤에도 반드시 슬래시를 추가 (엄격하게 작성) (<img> => <img />)

3. 속성은 카멜 케이스로 작성

• JSX는 자바스크립트로 컴파일됨
  • JSX의 각 attribute는 각각 자바스크립트 객체의 key
• 객체의 key에는 대시('-')를 사용할 수 없기 때문에 카멜 케이스 사용
  • 예: stroke-width 대신 strokeWidth
• 같은 이유로 예약어도 사용할 수 없음
  • 예: class는 예약어 - className 사용

비고
aria-* 과 data-* 어트리뷰트는 역사적 이유로 HTML과 동일하게 대시('-') 사용하여 작성

📌 JSX에서 Javascript 사용하기

• JSX 마크업 안에 JavaScript 로직을 추가하거나 동적 프로퍼티 참조 가능

1. 문자열 전달 시 따옴표 사용

• JSX에 문자열 속성을 전달하려면 작은따옴표 또는 큰따옴표로 묶어서 전달

2. Javascript 값 전달 시 중괄호 사용

• 속성을 문자열과 같은 고정 값이 아니라 동적으로 지정할 때
  • 예: src="avatar"와 src={avatar}의 차이
• 중괄호를 통해 마크업에서 바로 JavaScript 작업 가능
• 중괄호 안에는 함수 호출을 포함한 모든 JavaScript 표현식 포함 가능

3. 이중 중괄호로 CSS 및 다른 객체 전달

• JSX에 객체를 전달할 수도 있음
• 객체는 중괄호로 표현
  • JSX에서 JS '객체'를 전달하면 다음과 같은 형태
    => person={{ name: "Hedy Lamarr", inventions: 5 }}
• JSX의 인라인 CSS 스타일을 예로 들 수 있음
  • 인라인 스타일을 사용할 때 style 어트리뷰트에 CSS '객체'를 전달할 수 있음
• JSX에 이중 중괄호가 있으면 중괄호 내부의 '객체'일 뿐이라는 점

  <ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
  }>

• 또는 CSS를 객체로 바깥에 이동시켜 JSX의 중괄호에서 참조하는 것도 가능

 const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
    </div>
  );
}