[번역] JSX 안에서 자바스크립트 사용하기

원문: Part 3B — JSX 안에서 자바스크립트 사용하기

---

JSX의 가장 큰 장점 중 하나는 UI 안에서 자바스크립트를 직접 사용할 수 있다는 점입니다.

정적인 콘텐츠를 표시하는 데 그치지 않고, 중괄호 {}를 이용해 자바스크립트 표현식을 끼워 넣으면 인터페이스를 동적으로 만들 수 있습니다.

예를 들면 다음과 같습니다.

const name = "Ayush";
function App() {
  return (
    <h1>Welcome, {name}</h1>
  );
}

React가 이 컴포넌트를 렌더링할 때, {name}은 그 시점의 값으로 치환됩니다.

>>> Welcome, Ayush

이 덕분에 JSX는 매우 강력해집니다. UI가 데이터를 자동으로 반영하기 때문입니다.

---

중괄호 안에는 무엇을 넣을 수 있나요?

자바스크립트 표현식이라면 무엇이든 넣을 수 있습니다.

변수

const city = "Pune";
<p>I live in {city}</p>

산술 연산

<p>10 + 20 = {10 + 20}</p>

>>> 10 + 20 = 30

문자열 메서드

const name = "react";
<h1>{name.toUpperCase()}</h1>

>>> REACT

함수 호출

function greet(name) {
  return `Hello ${name}`;
}

<h2>{greet("Ayush")}</h2>

>>> Hello Ayush

삼항 연산자

const isLoggedIn = true;

<h1>
  {isLoggedIn ? "Welcome Back" : "Please Login"}
</h1>

간단한 조건부 UI를 작성할 때는 이 방식을 선호합니다.

---

JSX 안에 쓸 수 없는 것

초보자가 흔히 저지르는 실수는 JSX 안에 자바스크립트 문(statement)을 쓰려는 것입니다.

다음은 잘못된 예입니다.

{
  if (age > 18) {
    return "Adult";
  }
}

왜일까요?

if 문은 표현식(expression)이 아니라 문(statement)이기 때문입니다.

대신 다음과 같이 작성합니다.

{
  age > 18 ? "Adult" : "Minor"
}

또는 JSX를 반환하기 전에 값을 미리 계산해 둡니다.

---

JSX 속성

JSX의 속성은 HTML과 매우 비슷해 보입니다.

예시:

<img src="react.png" alt="React Logo" />

다만 몇 가지 중요한 차이가 있습니다.

class는 className이 됩니다

HTML

<div class="card">

JSX

<div className="card">

왜일까요?

class는 이미 자바스크립트의 예약어이기 때문입니다.

그래서 React는 className을 사용합니다.

for는 htmlFor가 됩니다

HTML

<label for="email">

JSX

<label htmlFor="email">

이 역시 자바스크립트 키워드와의 충돌을 피하기 위함입니다.

---

JSX의 인라인 스타일링

React는 CSS를 텍스트로 작성하는 대신 자바스크립트 객체 형태를 기대합니다.

잘못된 예

<h1 style="color:red">

올바른 예

<h1 style={{ color: "red" }}>

이중 중괄호에 주목하세요.

바깥 중괄호는 자바스크립트임을 나타냅니다.

안쪽 중괄호는 객체를 만듭니다.

여러 스타일을 지정할 때:

<h1
  style={{
    color: "blue",
    fontSize: "40px",
    fontWeight: "bold"
  }}
>
  React
</h1>

인라인 스타일은 동적인 값을 다룰 때 유용하지만, 규모가 큰 애플리케이션에서는 대부분의 스타일을 CSS 파일이나 CSS 모듈에 두는 편이 좋습니다.

---

JSX 주석

HTML 주석은 동작하지 않습니다.

잘못된 예

<!-- Heading -->

올바른 예

{/* Heading */}

React는 렌더링 과정에서 이 주석을 무시합니다.

---

여러 개의 요소 렌더링하기

여러 개의 제목을 표시하고 싶다고 해봅시다.

이렇게 작성하는 대신:

<h1>React</h1>
<h2>JSX</h2>

부모 요소로 감싸 줍니다.

<div>
  <h1>React</h1>
  <h2>JSX</h2>
</div>

하지만 불필요한 <div> 요소를 추가하면 HTML이 지저분해질 수 있습니다.

React는 더 깔끔한 해법을 제공합니다.

---

React 프래그먼트(Fragment)

프래그먼트를 사용하면 별도의 DOM 노드를 추가하지 않고도 여러 요소를 담을 수 있습니다.

이렇게 하는 대신:

<div>
    ...
</div>

이렇게 작성합니다.

<>
    ...
</>

예시

function App() {
  return (
    <>
      <h1>React</h1>
      <p>Learning JSX</p>
    </>
  );
}

이렇게 하면 단일 부모 요소를 요구하는 React의 규칙을 만족하면서도 DOM을 더 깔끔하게 유지할 수 있습니다.

---

리스트 렌더링 (소개)

배열이 하나 있다고 상상해 보세요.

const fruits = [
  "Apple",
  "Banana",
  "Orange"
];

자바스크립트의 map() 함수를 사용해 각 항목을 표시할 수 있습니다.

<ul>
  {fruits.map((fruit) => (
    <li>{fruit}</li>
  ))}
</ul>

리스트와 key는 다음 글에서 자세히 다루겠지만, JSX가 자바스크립트 배열과 자연스럽게 어우러진다는 점은 알아두면 유용합니다.

---

초보자가 흔히 저지르는 실수

태그 닫기를 잊는 것

잘못된 예

<img>

올바른 예

<img />

여러 개의 부모 요소를 반환하는 것

잘못된 예

<h1>Hello</h1>
<p>World</p>

올바른 예

<>
    <h1>Hello</h1>
    <p>World</p>
</>

HTML 속성을 그대로 쓰는 것

잘못된 예

<div class="container">

올바른 예

<div className="container">

JSX 안에서 문(statement)을 쓰는 것

잘못된 예

{
if(true){}
}

올바른 예

{
true ? "Yes" : "No"
}

중괄호를 잊는 것

잘못된 예

<h1>name</h1>

올바른 예

<h1>{name}</h1>

---

모범 사례

React 애플리케이션이 커질수록, 몇 가지 습관을 지키면 코드를 유지보수하기가 훨씬 수월해집니다.

• JSX를 깔끔하고 읽기 쉽게 유지하세요.
• 큰 JSX 블록은 더 작은 컴포넌트로 나누세요.
• 지나치게 깊게 중첩된 마크업은 피하세요.
• 의미 있는 컴포넌트 이름을 사용하세요.
• 가능한 한 비즈니스 로직은 return 문 밖에 두세요.
• 불필요한 래퍼 <div> 대신 프래그먼트를 사용하세요.
• 설명적인 변수명을 사용하세요.
• Prettier나 선호하는 포매터를 이용해 코드 형식을 일관되게 유지하세요.

읽기 좋은 JSX는 디버깅하기 쉽고, 동료들이 이해하기도 쉽습니다.

---

실전 예제

간단한 프로필 카드를 만들어 봅시다.

function App() {
const user = {
    name: "Ayush",
    role: "Frontend Developer",
    company: "ABC Pvt Ltd"
  };
  return (
    <div className="card">
      <h1>{user.name}</h1>
      <h2>{user.role}</h2>
      <p>{user.company}</p>
    </div>
  );
}

자바스크립트와 UI가 얼마나 자연스럽게 어우러지는지 보세요.

이것이 개발자들이 React로 작업하기를 즐기는 가장 큰 이유 중 하나입니다.

---

연습 문제

다음 글로 넘어가기 전에 직접 풀어 보세요.

연습 1

다음 항목을

• 이름
• 대학
• 도시

JSX로 표시해 보세요.

연습 2

student라는 객체를 만드세요.

다음을

• 이름
• 나이
• 강좌

중괄호를 사용해 표시하세요.

연습 3

오후 12시 이전에는

Good Morning

을 표시하고,

그 외에는

Good Evening

을 삼항 연산자로 표시하세요.

연습 4

프로그래밍 언어 다섯 개로 배열을 만들고, 순서 없는 목록(unordered list)으로 표시하세요.

연습 5

JSX와 인라인 스타일링을 사용해 프로필 카드를 만드세요.

---

핵심 정리

지금까지 배운 내용을 빠르게 되짚어 봅시다.

• JSX는 JavaScript XML의 약자입니다.
• JSX는 HTML이 아닙니다.
• 브라우저는 JSX를 직접 이해하지 못합니다.
• Babel이 JSX를 자바스크립트로 변환합니다.
• JSX는 UI 코드를 더 읽기 쉽게 만듭니다.
• 중괄호를 이용해 자바스크립트 표현식을 끼워 넣을 수 있습니다.
• JSX에는 className이나 htmlFor처럼 HTML과 다른 몇 가지 문법 차이가 있습니다.
• 모든 컴포넌트는 단일 부모 요소 또는 프래그먼트를 반환해야 합니다.
• JSX의 주석은 {/* */}를 사용합니다.
• 배열은 map() 같은 자바스크립트 메서드로 렌더링할 수 있습니다.
• 좋은 JSX 관습을 따르면 더 깔끔하고 유지보수하기 쉬운 React 애플리케이션이 됩니다.

축하합니다! 🎉

이제 여러분은 React에서 가장 근본적인 개념 중 하나를 이해하게 되었습니다. 앞으로 만들게 될 거의 모든 React 애플리케이션은 JSX를 폭넓게 사용합니다.

---

다음 편은?

React가 사용자 인터페이스를 어떻게 기술하는지 알았으니, 이제 React가 그 인터페이스를 재사용 가능한 구성 요소로 어떻게 쪼개는지 배울 차례입니다.

다음 글에서는 React 컴포넌트를 살펴봅니다.

여러분은 다음을 배우게 됩니다.

• 컴포넌트란 무엇인가
• 함수형 컴포넌트
• 컴포넌트 네이밍 규칙
• 재사용 가능한 UI
• 중첩 컴포넌트
• 컴포넌트 합성(composition)
• 첫 번째 재사용 가능한 애플리케이션 만들기

다음 글을 마칠 무렵이면, 웹페이지를 하나의 커다란 파일로 생각하는 대신 React 개발자처럼 사고하기 시작할 것입니다. 즉, 재사용 가능한 컴포넌트를 하나씩 쌓아 애플리케이션을 만들어 나가는 방식으로 말이죠.

즐거운 코딩 되세요! 🚀