Smilehugo
Home
 > 
Programming
React의 JSX 문법

React의 JSX 문법

2023-03-17

안녕하세요.

지난 시간에는 React의 기본 원리인 선택된 DOM에 새로운 DOM을 생성해서 추가하는 것에 대해서 알아봤습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <div id="root"></div>
  <script>
    const rootElement = document.getElementById('root');
    const element = React.createElement("h1", {children: "Hello World"});
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

하지만 위와 같이 React.createElement() 함수를 사용해서 DOM을 생성하는 것은 굉장히 번거롭고, 가독성도 떨어지는 코드입니다.

따라서 JavaScript + HTML 인 JSX 문법을 사용합니다.

JSX 문법은 문자도 HTML도 아닌 JavaScript의 확장 문법입니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <div id="root"></div>
  <script>
    const rootElement = document.getElementById('root');
    const element = <h1 className="title">Hello World</h1>;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

이렇게만 해서는 정상적으로 작동하지 않는 것을 확인할 수 있습니다.

여기서 JSX 문법을 사용하는 경우 Babel 같은 컴파일러를 사용해서 JavaScript로 변환해야 합니다.

따라서, Babel을 CDN으로 불러와서 사용하고, script태그에 type="text/babel" 속성을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById('root');
    const element = <h1 className="title">Hello World</h1>;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

JSX 문법을 사용한 코드가 정상적으로 작동하는 것을 확인할 수 있습니다.

뿐만아니라. JSX 문법을 사용할 때는 텍스트를 변수에 넣어 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById('root');
    const welcome = "Hello World";
    const element = <h1 className="title">{welcome}</h1>;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

또한, class의 값도 변수로 지정하여 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById('root');
    const welcome = "Hello World";
    const title = "title";
    const element = <h1 className={title}>{welcome}</h1>;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

여기서 더 나아가서 props라는 객체를 만들어서 사용할 수 있습니다.

children의 내용도 props에 포함되었으므로 엔딩 태그를 따로 적지 않고 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const welcome = "Hello World";
    const title = "title";
    const props = { className: title, children: welcome };
    const element = <h1 className={props.className} children={props.children} />;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

또한 ... spread 연산자를 사용할 수 있습니다.

이 경우, props 객체의 내용을 풀어서 사용하겠다는 의미입니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const welcome = "Hello World";
    const title = "title";
    const props = { className: title, children: welcome };
    const element = <h1 {...props} />;
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

위와 같이 React의 JSX 문법에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기