JSX로 마크업 작성하기

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/writing-markup-with-jsx

1️⃣ 웹의 핵심 기술

• HTML: 콘텐츠 구조
• CSS: 디자인 및 스타일
• JavaScript: 동적 로직

2️⃣ 파일 분리 원칙

• 일반적으로 HTML, CSS, JavaScript를 개별 파일로 관리
• JavaScript는 HTML과 분리되어 동작하며, HTML은 마크업 역할을 수행

HTML

JavaScript

인터랙티브 웹의 발전

• 로직이 콘텐츠를 결정하는 방식 증가
• JavaScript가 HTML을 직접 생성 및 관리

2️⃣ React의 접근 방식

• 렌더링 로직과 마크업을 같은 위치에서 처리
• 컴포넌트 기반으로 UI 구성

Sidebar.js React component

Form.js React component

1️⃣ 렌더링 로직과 마크업의 결합

• 같은 컴포넌트 내에서 함께 관리 → 동기화 유지가 쉬움