[🍎코딩애플 강의요약] JSX 핵심 문법 3가지 🔑

개요 📋

JSX는 React에서 HTML을 대체하는 문법으로, 기존 HTML/CSS 지식을 활용하여 웹페이지를 만들 수 있습니다. App.js가 메인 페이지이며, 여기서 레이아웃을 구성합니다.

JSX 핵심 문법 3가지 🔑

1. className 사용하기 🏷️

<div className="black-nav">
  <h4>블로그임</h4>
</div>

• HTML의 class 대신 className을 사용
• 이유: JSX가 JavaScript 기반이므로 예약어인 'class'를 피해야 함
• CSS 파일에서 평소처럼 .black-nav { } 형식으로 스타일 정의

2. 변수를 HTML에 삽입하기 - 데이터 바인딩 📊

let post = '강남 우동 맛집';
return (
  <div>{ post }</div>
)

• 변수를 HTML에 표시할 때 { } 중괄호 사용
• 속성값에도 적용 가능: <div className={변수명}>
• 기존 JS보다 간단하게 데이터 표시 가능
• 이 작업을 '데이터 바인딩'이라고 함

3. 인라인 스타일 적용하기 🎨

<div style={{ color: 'blue', fontSize: '30px' }}>글씨</div>

• 스타일은 이중 중괄호 {{ }} 안에 객체 형태로 작성
• CSS 속성명은 대시(-) 대신 카멜케이스(camelCase) 사용
  • font-size → fontSize
• 속성값은 문자열로 작성
• CSS 파일 열기 귀찮을 때 유용