[React] 공식 문서 스터디 1-3. Writing Markup with JSX | JSX로 마크업 작성하기

 

목차
0. 시작하기
1. JSX: JavaScript에 마크업 넣기
2. HTML을 JSX로 변환하기
3. JSX 규칙

 

0. 시작하기

• JSX : js를 확장한 문법
• js 파일 안에 HTML과 유사한 마크업 작성 가능하게 함

💡 학습 내용

• React가 마크업과 렌더링 로직을 같이 사용하는 이유
• JSX와 HTML의 차이점
• JSX로 정보를 보여주는 방법

 

1. JSX: JavaScript에 마크업 넣기

• 웹 : HTML + CSS + JavaScript
• HTML : 컨텐츠
• CSS : 디자인
• JavaScript : 로직
• => 각각 분리된 파일로 관리
• 웹이 더욱 인터랙티브 해지면서 로직이 컨텐츠 결정하는 경우가 많아짐
• → JavaScript가 HTML 담당하게 됨
• ⇒ ⭐React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있음 !!!
• 버튼에서 렌더링 로직 + 마크업 함께 존재 → 서로 동기화 상태 유지 가능
• 관련 없는 항목들은 개별적으로 변경하는 것이 더 안전
• React 컴포넌트는 JSX라는 구문 확장자를 사용하여 해당되는 마크업 표시
• JSX ≠React

JSX

• JSX는 JavaScriptXML의 약자
• JavaScript 안에서 HTML과 유사한 구문 사용 가능
• JavaScript 코드 안에서 HTML을 작성하듯이 UI 컴포넌트 만들 수 있다
• JSX는 실제로 JavaScript로 컴파일되어 실행
• 이러한 방식은 UI와 관련된 로직을 JavaScript 파일 안에 포함시켜 코드의 가독성과 유지 보수성을 높여줌

 

2. HTML을 JSX로 변환하기

<h1>Hedy Lamarr's Todos</h1>
<img
	src="https://i.imgur.com/yX0vd0Ss.jpg"
	alt="Hedy Lamarr"
	class="photo"
>
<ul>
	<li>Invent new traffic lights
	<li>Rehearse a movie scene
	<li>Improve the spectrum technologh
</ul>

 

JSX는 HTML보다 더 엄격한 규칙이 존재한다

그러니 위 코드를 그대로 복사 붙여 넣기 하면 제대로 동작하지 않는다

위 HTML을 컴포넌트로 만들어보자

 

3. JSX 규칙

3-1. 단일 엘리먼트 반환

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

 

• 하나의 부모 태그로 감싸야한다
• <> </> 빈 태그(Fragment) : HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 준다

3-2. 모든 태그 닫기

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

 

JSX에서는 태그를 명시적으로 닫아야 한다

3-3. 거의 대부분이 카멜케이스로 작성

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo" // class를 className으로 변경
/>

 

• JSX → JavaScript
• JSX로 작성된 속성 → JavaScript 객체의 키
• JavaScript 변수명 규칙
  • 대시 포함 불가
  • 예약어 사용 불가

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

 

HTML을 JSX로 변환한 최종 코드이다

 

---

https://react.dev/learn/writing-markup-with-jsx

Writing Markup with JSX – React

해당 문서를 공부하며 작성하였습니다

피드백은 언제나 환영입니다 !