React 기본 문법-JSX

1. React 기본 문법
다음으로 React 기본 문법 중 "JSX"에 대해 알아보겠습니다.

JSX는 JavaScript XML의 줄임말로, React 요소를 생성하는데 사용하는 문법입니다. HTML과 비슷한 구조를 가지며, JavaScript 표현식을 중괄호 {} 안에 넣어 사용할 수 있습니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

위의 예시에서 element는 JSX 형태의 React 요소입니다. {name} 부분은 JavaScript 표현식이며, 이 부분이 'Josh Perez'라는 문자열로 치환되어 화면에 표시됩니다.

JSX 내부에서 if문이나 for문을 직접 사용할 수 없지만, 삼항 연산자나 Array.prototype.map 함수 등을 이용하여 조건부 렌더링이나 리스트 렌더링을 할 수 있습니다.

또한 JSX에서 속성을 정의할 때는 HTML과 다르게 카멜케이스(camelCase)를 사용합니다. 예를 들어, class 대신 className, for 대신 htmlFor를 사용합니다.

다음 주제로 넘어가도록 하겠습니다.