JSX (JavaScirpt XML)
JSX란 React의 컴포넌트에서 사용하는 JavaScirpt의 확장된 문법으로, 컴포넌트는 상황에 따라 UI에 관한 코드를 기능과 함께 하나의 파일로 만들 수 있어 개발자로 하여금 UI의 구조를 쉽게 파악할 수 있습니다.
조금 다르게 설명하면 JSX는 HTML과 매우 흡사한 문법을 사용하며, 이는 React 컴포넌트에서 구조와 UI를 쉽게 정의하고 표현 할 수 있게 도와줍니다.
JSX 문법은 공식적인 JavaScirpt 문법이 아니지만 바벨을 통해 개발자들이 만든 문법이나 최신 JavaScirpt들을 사용할 수 있습니다.
JSX는 왜 만들어졌을까?
웹은 HTML, CSS, JavaScirpt를 기반으로 만들어져 각각 '콘텐츠', '디자인', '논리적 기능'을 담당하며 보통 별도의 파일로 사용했습니다. 그러나 기술의 발전으로 웹은 사용자와의 상호작용이 커졌고, 이로 인해 JavaScirpt(논리적 기능)가 HTML의 콘텐츠 역할을 차지하는 비중이 커졌습니다.
React 프로젝트 생성 및 기본 구조
아래 사진은 vite라고 불리는 프론트엔드 도구를 통해 React 프로젝트를 생성한 초기 코드입니다.
main.jsx
- ReactDOM.createRoot(document.getElementById('root'))
웹 페이지 내에서 React 애플리케이션을 표출할 위치를 설정합니다. 즉, HTML에서 id가 root인 요소이며 대부분의 리액트 프로젝트는 div가 사용됩니다. div는 React 애플리케이션의 루트(root)가 됩니다.
- render()
import를 사용하여 App.jsx를 가져와 React 애플리케이션의 최상위 컴포넌트인 App를 렌더링합니다.
- React.StrictMode
App 컴포넌트를 감싸는 wrapper 컴포넌트로 개발 모드에서 애플리케이션 내의 잠재적인 문제를 감지하는 데 도움을 줍니다.
App.jsx
임의로 작성한 App 컴포넌트 입니다. HTML의 문법과 아주 비슷한 형태로 작성할 수 있다는 것을 볼 수 있습니다.
제가 작성한 이전 글에서 설명했던 것처럼 컴포넌트의 장점을 활용하기 위해 코드를 수정하면 아래와 같습니다.
원래의 코드를 Header, Main, Footer 각 이름의 함수 컴포넌트를 생성하여 코드가 한결 줄어든 것을 볼 수 있습니다. 만들어진 함수 컴포넌트들은 별도의 파일로 분리하여 import와 export를 사용할 수 있습니다.
JSX 문법
사실 JSX의 경우 HTML과 매우 비슷한 문법을 가지고 있지만 몇 가지 엄격한 기준을 가지고 있습니다.
아래에서 몇가지 예시를 설명하겠습니다.
무조건 하나의 요소를 반환
감싸고 있던 div 요소를 지우면 오류가 발생하게 됩니다. 왜냐하면 React는 Virtual DOM 트리를 구성하고 변화를 감지하는데, 이때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문입니다.
따라서 보통 div 같은 요소로 묶어주거나, Fragment라는 것을 이용하여 불필요한 DOM을 생성하지 않아도 됩니다.
대문자로 시작
위의 예시들을 보고 알 수 있듯이 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.
{} 사용 - JavaScrpt 표현
위의 사진과 같이 {}를 사용하여 JavaScrpt 표현식을 사용할 수 있습니다.
class 대신 ClassName
HTML에서는 class를 사용하여 속성을 설정하지만 JSX에서는 ClassName를 사용하여 설정합니다.
마무리
요약
JSX 문법은 React 컴포넌트에서 HTML과 비슷한 문법을 사용하며 개발자로 하여금 UI의 구조를 쉽게 파악할 수 있게 도와주며, 사용된 요소들은 컴포넌트를 나누는데 도움을 줍니다. 허나 HTML과는 조금 다른 문법을 사용하기 때문에 이를 인지하고 있어야 합니다.
소감
이번 글을 작성하면서 컴포넌트와 JSX를 나눠서 설명하는 것이 생각보다 어렵다는 것을 느꼈습니다. 조금 더 자세한 글을 작성하고 여러가지 예시와 그림을 활용하고 싶었지만 너무 길어지면 가독성이 떨어진다 생각이 들었습니다.
글 작성에 도움받은 목록
