Binyard

Appearance

JSX (JavaScript XML) ​

JSX ​

JSX는 React에서 사용하는 JavaScript 확장 문법이다.
HTML과 비슷한 문법을 JavaScript 코드 안에서 작성할 수 있게 해준다.

jsx
const element = <h1>Hello, JSX!</h1>;
  • JSX는 브라우저가 직접 이해하는 문법은 아님
  • React와 빌드 도구는 JSX를 JavaScript 코드로 변환해서 처리

JSX의 특징 ​

  • JavaScript 안에서 HTML처럼 UI 구조를 작성할 수 있다.
  • 컴포넌트의 반환값으로 자주 사용된다.
  • JavaScript 표현식을 {} 안에 넣어 사용할 수 있다.
  • 최종적으로는 React.createElement() 형태로 변환된다.

JSX는 어떻게 변환될까? ​

js
React.createElement(
  type, // 태그 또는 컴포넌트
  props, // 속성
  children, // 자식 요소
);

JSX는 React가 이해할 수 있도록 JavaScript 코드로 변환된다.

jsx
// JSX 코드
const element = (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);
js
// 위 코드는 내부적으로 다음과 비슷한 형태로 변환
const element = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello"),
  React.createElement("p", null, "World"),
);

React는 JSX를 JavaScript 객체 형태로 변환하고, 이를 바탕으로 화면에 렌더링할 내용을 판단한다.


JSX 문법 규칙 ​

1. 하나의 최상위 요소로 감싸야 한다 ​

JSX는 반드시 하나의 부모 요소를 반환해야 한다.

jsx
// good
return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

// Fragment 사용하기
return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

2. JavaScript 표현식은 중괄호 안에 작성 ​

JSX 안에서 JavaScript 값을 사용하려면 {}를 사용한다.

jsx
const name = "짱구";
return <h1>안녕, {name}!</h1>;

// 계산식
const price = 10000;
return <p>총 가격: {price * 2}원</p>;

// 함수 호출 결과
function formatName(name) {
  return `${name}님`;
}
return <h1>{formatName("짱구")}</h1>;

하지만 if, for 같은 문은 직접 작성할 수 없다.
조건문이나 반복문은 JSX 밖에서 처리하거나, 삼항 연산자와 map()을 사용한다.

jsx
// bad
return <div>{if (isLogin) { "로그인" }}</div>;

3. for 대신 htmlFor를 사용 ​

HTML의 label 태그에서는 for 속성을 사용한다.

html
<label for="email">이메일</label> <input id="email" />

JSX에서는 htmlFor를 사용한다.

jsx
return (
  <>
    <label htmlFor="email">이메일</label>
    <input id="email" />
  </>
);

4. 인라인 스타일은 객체로 작성 ​

HTML에서는 문자열로 스타일을 작성한다.

html
<div style="color: red; font-size: 20px;">Hello</div>

JSX에서는 스타일을 JavaScript 객체 형태로 작성한다.

jsx
return <div style={{ color: "red", fontSize: "20px" }}>Hello</div>;

CSS 속성명은 kebab-case가 아니라 camelCase로 작성한다.


5. 조건부 렌더링 ​

JSX에서는 조건에 따라 다른 UI를 보여줄 수 있다.

삼항 연산자 ​

jsx
const isLogin = true;

return <div>{isLogin ? <p>환영합니다.</p> : <p>로그인이 필요합니다.</p>}</div>;

&& 연산자 ​

조건이 참일 때만 특정 요소를 보여주고 싶다면 && 연산자를 사용할 수 있다.

jsx
const hasMessage = true;

return <div>{hasMessage && <p>새 메시지가 있습니다.</p>}</div>;

6. 리스트 렌더링 ​

배열 데이터를 화면에 반복해서 보여줄 때는 map()을 사용한다.

jsx
const fruits = ["사과", "바나나", "딸기"];

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

key 속성 ​

리스트를 렌더링할 때는 각 요소에 고유한 key 값을 넣어야 한다.

jsx
const users = [
  { id: 1, name: "짱구" },
  { id: 2, name: "철수" },
  { id: 3, name: "유리" },
];

return (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

key는 React가 어떤 항목이 변경, 추가, 삭제되었는지 구분하는 데 사용한다.


7. props 전달하기 ​

JSX에서는 직접 만든 컴포넌트도 HTML 태그처럼 사용할 수 있다.

jsx
function Greeting({ name }) {
  return <h1>안녕하세요, {name}!</h1>;
}

function App() {
  return <Greeting name="짱구" />;
}

여기서 name="짱구"처럼 컴포넌트에 전달하는 값을 props라고 한다.


jsx
<Greeting name="짱구" />
<User age={20} isLogin={true} />

문자열은 따옴표로 전달하고, JavaScript 값은 중괄호로 전달한다.