[React.js] JSX(JavaScript XML)이란? (with 문법 예제)

안녕하세요. 성조입니다.

 

이번 포스팅은 JavaScript를 확장한 문법인 JSX에 대해서 정리하려 합니다.

 

올바른 지식 전달을 위해 노력하고 있으나, 혹여나 잘못된 지식 전달이 있다면 언제든지 댓글 남겨주시면 감사드리겠습니다!

---

JSX(JavaScript XML)란?

JSX는 JavaScript XML의 약자로, JavaScript의 확장 문법이다. JSX를 통해서 JavaScript 내부에 마치 HTML와 같은 코드를 작성할 수 있게 만들어주는 것이다. JSX의 경우. React에서 컴포넌트를 작성하는 주요 방식으로 활용되고 있으며, 이를 통해 UI 컴포넌트가 어떻게 생겼는지 한눈에 이해하기 쉬운 장점이 있다.

 

JSX의 경우 선택 사항이다.

 

 

 

JSX(JavaScript XML) 규칙

1. 모든 태그는 닫혀야 한다.

HTML의 경우 일부 태그를 달지 않아도 작동하지만 JSX의 경우에는 모든 태그를 닫아야 한다.

 

[HTML]

<div>
    <input type="text">
    <br>
</div>

부모 태그와 자식 태그로 닫히는 div 태그와 그 사이에 input 태그 또는 br 태그의 경우 '/'로 닫지 않아도 동작할 수 있다.

 

[JSX]

<div>
    <input type="text" />
    <br />
</div>

JSX에서는 input, br 태그와 같이 부모 태그를 따로 안 두는 경우 '/'를 통하여 self-closing 방식을 사용한다.

 

2. 태그의 속성 이름은 카멜 케이스를 사용한다.

HTML의 속성 이름은 일반적으로 소문자를 활용하고 '소문자-소문자'와 같이 하이픈으로 구분되지만, JSX에서는 카멜 케이스를 사용한다. 기존 HTML의 class 태그의 경우 그대로 활용하면 되지만 JSX에서는 className으로 사용된다.

 

3. JavaScript 표현식은 중괄호 내에 위치해야 한다.

JSX는 JavaScript 표현식을 활용하는데 표현식은 중괄호 내에 위치해야 한다.

ex) {변수}

const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

 

4. JSX는 표현식이며, 조건부 렌더링은 JavaScript 연산자를 이용한다.

자바스크립트에서 지원하는 문자열, 숫자, 배열, 함수 호출 등 여러 가지 형태를 사용할 수 있다. 어떤 형태가 있는지 궁금하다면 포스팅 맨 하단에 참조 링크를 남겨놨으니 '표현식과 연산자'를 한번 방문해서 추가적인 학습을 하면 좋을 것 같다.

 

5. 스타일링은 문자열 대신 객체로 전달하여 사용한다.

HTML에서는 스타일을 문자열로 작성하지만, JSX에서는 객체로 작성하여 사용한다.

function App() {
  const name = "sj";
  return (
    <div>
      <h1>Welcome to {sj}!</h1>
    </div>
  );
}

export default App;

 

6. JSX는 HTML과 다른 형태의 주석을 지원한다.

HTML의 경우 '// 내용' 또는 '/*내용*/'의 주석을 활용한다.

JSX의 경우 {/* 내용 */}의 형식으로 주석을 활용한다.

const element = <h1>Hello, world! {/* 주석 */}</h1>;

 

7. 부울형 속성은 속성명만으로도 사용할 수 있다.

HTML과 유사하게, JSX에서는 부울형 속성에 대해 속성명만 기재하여 true or false를 나타낼 수 있다.

const element = <button disabled>Click me!</button>;

 

 

JSX(JavaScript XML) 예제

1. 중첩된 태그 사용

function App() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>Let's build something cool.</p>
    </div>
  );
}

export default App;

 

2. 인라인 스타일링

function App() {

  const name = 'React';
  const style = {
    color: 'blue',
    fontSize: '30px'
  };
  
  return (
    <div style={style}>
      Hello, {name}!
    </div>
  );
}

export default App;

 

3. 조건부 렌더링

function App({ name }) {
  return (
    <div>
      {name ? <h1>Welcome back, {name}!</h1> : <h1>Welcome, Guest!</h1>}
    </div>
  );
}

export default App;

 

4. 반복 렌더링

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => <li key={index}>{todo}</li>)}
    </ul>
  );
}

export default TodoList;

 

5. 이벤트 처리

function Button() {
  const handleClick = () => alert('Button clicked!');

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

export default Button;

 

 

---

오타나 궁금한 부분이 있다면 언제든지 댓글 남겨주시면 감사드리겠습니다.

다음 포스팅 때 뵙겠습니다!

 

 

 

- 참조 -

https://ko.legacy.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper

JSX 소개 – React

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators

표현식과 연산자 - JavaScript | MDN