[ vite+React 기초학습 2] React의 기본 문법과 JSX 이해

JSX란 무엇인가

JSX는 JavaScript에 XML을 결합한 문법으로, UI를 선언적으로 기술할 수 있게 해줍니다. 마치 HTML처럼 보이지만 JavaScript 코드 안에서 사용하는 문법입니다. HTML과의 가장 큰 차이점은 JSX에서는 JavaScript 표현식을 중괄호 {}로 삽입할 수 있다는 것입니다.

JSX는 마치 '레고 블록을 조립하듯' 화면 요소들을 조립할 수 있도록 도와주는 역할을 합니다. JavaScript로 UI를 그릴 수 있지만, JSX를 쓰면 훨씬 읽기 쉽고 구조화된 코드가 됩니다.

기본 개념

• JSX는 반드시 하나의 루트 엘리먼트를 반환해야 합니다
• 중괄호 {}로 JavaScript 표현식을 사용할 수 있습니다
• Babel이 JSX를 React.createElement()로 변환합니다

주요 사용 위치/상황

• 화면 구성 요소를 표현할 때
• 동적인 텍스트, 속성 삽입이 필요할 때

구체적 코드 예시

function App() {
  const name = 'React';
  return <h1>Hello, {name}!</h1>;
}

핵심 요점 정리

• JSX는 HTML과 유사한 JavaScript 확장 문법입니다
• 중괄호로 동적인 값을 삽입할 수 있습니다
• 컴포넌트는 반드시 하나의 루트 노드를 반환해야 합니다
• JSX는 결국 JavaScript로 변환되어 실행됩니다

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.