[React] (리액트 공부하기 3) JSX 사용법

JSX는 리액트에서 HTML과 자바스크립트를 함께 사용할 수 있도록 도와주는 문법 확장이다.
쉽게 말해, HTML처럼 보이는 코드를 작성하지만 실제로는 자바스크립트로 변환된다.

---

JSX란 무엇인가?

1. HTML처럼 보이지만 자바스크립트 코드이다.
2. 브라우저가 JSX를 직접 실행하지는 않고, 리액트가 JSX를 자바스크립트로 변환한 뒤 실행한다.
3. 리액트 컴포넌트 안에서 UI를 정의할 때 가장 많이 사용된다.

---

JSX 기본 문법

1. HTML과 자바스크립트의 결합

• JSX는 HTML 구조를 자바스크립트 코드 안에 작성한다.
• JSX를 사용하면 다음과 같이 코드를 작성할 수 있다:

const element = <h1>Hello, world!</h1>;

2. 중괄호 {}로 자바스크립트 표현식 삽입

• JSX 안에서 자바스크립트 값을 삽입하고 싶다면, 중괄호 {}를 사용한다.

예:

const name= 'React';
const element = <h1>Hello, {name}!</h1>;

결과:

<h1>Hello, React!</h1>

---

JSX 사용법 쉽게 이해하기

예제 1: 변수 삽입

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

• {name} 부분에 변수 name의 값인 "React"가 삽입된다.

결과:

<h1>Hello, React!</h1>

예제 2: 함수 호출

function formatName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = { firstName: 'Inje', lastName: 'Lee' };
const element = <h1>Hello, {formatName(user)}!</h1>;

• formatName(user) 함수가 호출 되어 user 객체의 이름을 조합한 값 (Inje Lee)이 삽입된다.

결과:

<h1>Hello, Inje Lee!</h1>

예제 3: 조건부 렌더링

사용자 유무에 따라 다른 값을 렌더링할 수도 있다.

function getGreeting(user) {
  if (user) {
  	return <h1>Hello, {user.firstName}!</h1>; 
  }
  return <h1>Hello, Stranger!</h1>;
}

const user = { firstName: 'React' };
const element = getGreeting(user);

• user가 있으면 사용자 이름(React)이 표시되고, 없으면 "Stranger"가 표시된다.

---

속성(Attribute) 설정

JSX에서 HTML 태그의 속성을 설정하는 방법:

• 속성은 key="value" 형식으로 작성한다.
• JSX에서는 class 대신 className을 사용한다.

예:

const element = <div className="container" tabIndex="0"></div>;

결과:

<div class="container" tabindex="0"></div>

---

이미지와 동적 속성

속성 값도 중괄호 {}를 사용해 동적으로 설정할 수 있다.

예:

const user = { avatarUrl: 'https://example.com/avatar.png' };
const element = <img src={user.avatarUrl} alt="User Avatar" />;

결과:

<img src="https://example.com/avatar.png" alt="User Avatar">

---

JSX의 장점

1. 가독성: HTML 구조와 비슷해서 코드를 이해하기 쉽다.
2. 동적 렌더링: 중괄호 {}를 사용해 자바스크립트 변수와 표현식을 동적으로 삽입할 수 있다.
3. 재사용성: JSX는 컴포넌트를 작성할 때 핵심 역할을 한다.

---

정리

• JSX는 HTML과 자바스크립트를 결합하여 UI를 정의하는 리액트의 문법 확장이다.
• 중괄호 {}를 사용해 변수, 함수 호출, 표현식 등을 동적으로 삽입할 수 있다.
• JSX는 결국 React.createElement() 함수로 변환 된다.