React JSX 기본: JavaScript XML 로 UI 작성법 배우기

소개

React 의 세계에 오신 것을 환영합니다! 본 랩에서는 React 로 사용자 인터페이스를 구축하는 데 필수적인 JSX 에 대해 자세히 알아봅니다. JSX(JavaScript XML) 는 JavaScript 의 구문 확장으로, JavaScript 파일 내에서 HTML 과 유사한 코드를 직접 작성할 수 있게 해줍니다. 이를 통해 UI 코드를 더 읽기 쉽고 표현력 있으며 유지 관리하기 쉽게 만들 수 있습니다.

본 랩에서는 다음과 같은 JSX 의 핵심 규칙을 배우게 됩니다.

HTML 과 유사한 요소 작성
동적 JavaScript 표현식 포함
CSS 클래스 적용
자체 닫힘 태그 사용
Fragment 를 사용하여 여러 요소 그룹화

기본 React 프로젝트가 ~/project/my-app 디렉토리에 설정되어 있습니다. 시작해 봅시다!

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 94%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

컴포넌트 return 문에 h1 과 같은 JSX 요소 작성

이 단계에서는 기본적인 JSX 요소를 작성하고 브라우저에서 렌더링되는 것을 확인합니다. JSX 를 사용하면 React 컴포넌트 내에서 HTML 과 매우 유사한 마크업을 직접 작성할 수 있습니다.

먼저 개발 환경을 실행해 보겠습니다. 모든 작업은 ~/project/my-app 디렉토리 내에서 이루어집니다.

터미널에서 프로젝트 디렉토리로 이동하여 필요한 종속성을 설치하고 개발 서버를 시작합니다.

cd ~/project/my-app
npm install

설치가 완료되면 다음 명령을 실행하여 개발 서버를 시작합니다.

npm run dev -- --host 0.0.0.0 --port 8080

서버가 실행 중임을 나타내는 출력이 표시됩니다. 이제 화면 상단의 Web 8080 탭을 클릭하여 라이브 애플리케이션을 확인합니다. "Hello, React!"가 표시되어야 합니다.

다음으로 왼쪽 파일 탐색기에서 src/App.jsx 파일을 엽니다. 이 파일에는 App이라는 간단한 React 컴포넌트가 포함되어 있습니다.

h1 요소를 수정해 보겠습니다. <h1> 태그 안의 텍스트를 "Welcome to JSX"로 변경합니다.

src/App.jsx의 내용을 다음 코드로 바꿉니다.

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

파일을 저장합니다 (Ctrl+S 또는 Cmd+S). Web 8080 탭의 애플리케이션이 자동으로 업데이트되어 새 텍스트가 표시됩니다.

중괄호 안에 JavaScript 표현식 포함하기

이 단계에서는 중괄호 {}를 사용하여 JavaScript 표현식을 JSX 에 직접 포함하는 방법을 배웁니다. 이는 동적 콘텐츠를 렌더링할 수 있게 해주는 강력한 기능입니다.

중괄호 안에는 유효한 JavaScript 표현식을 넣을 수 있습니다. 변수, 함수 호출 또는 산술 연산 등이 될 수 있습니다.

App 컴포넌트를 수정하여 동적인 제목을 표시해 보겠습니다. src/App.jsx 파일을 다시 엽니다.

App 함수 내에서 return 문 앞에 title이라는 JavaScript 상수를 선언하고 문자열 값을 할당합니다. 그런 다음 이 상수를 <h1> 요소 내에서 사용합니다.

src/App.jsx 파일을 다음 코드로 업데이트합니다.

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

파일을 저장합니다. 이제 Web 8080 탭을 확인합니다. 제목이 "React JSX Basics"로 업데이트된 것을 볼 수 있습니다. React 는 {title} 표현식을 평가하고 그 값을 <h1> 태그의 내용으로 렌더링합니다.

CSS 클래스를 위한 className 속성 추가

이 단계에서는 스타일링을 위해 JSX 요소에 CSS 클래스를 추가하는 방법을 배웁니다.

일반 HTML 에서는 class 속성을 사용하여 CSS 클래스를 할당합니다. 하지만 class는 JavaScript 에서 예약어입니다. 충돌을 피하기 위해 JSX 에서는 대신 className을 사용합니다.

먼저 스타일 규칙을 추가해 보겠습니다. src/App.css 파일을 열고 제목에 대한 스타일을 정의하기 위해 다음 CSS 코드를 추가합니다.

.title-style {
  color: #61dafb;
  text-align: center;
}

src/App.css 파일을 저장합니다.

이제 이 클래스를 <h1> 요소에 적용해 보겠습니다. src/App.jsx를 열고 h1 태그에 className 속성을 추가합니다.

src/App.jsx 파일을 다음과 같이 업데이트합니다.

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

파일을 저장하고 Web 8080 탭으로 전환합니다. 이제 App.css에 정의한 스타일에 따라 제목 텍스트가 가운데 정렬되고 연한 파란색으로 표시되는 것을 볼 수 있습니다.

img 요소에 자체 종료 태그 사용

이 단계에서는 JSX 에서 자체 종료 태그를 사용하는 방법을 배웁니다. HTML 에서는 <img>, <br>, <input>과 같은 일부 요소는 "void" 또는 "empty" 요소로, 닫는 태그가 없다는 의미입니다.

JSX 에서는 모든 태그를 명시적으로 닫아야 합니다. 자식이 없는 요소의 경우, 닫는 꺾쇠 괄호 앞에 슬래시 /를 추가하여 자체 종료 구문인 <img />를 사용합니다.

React 컴포넌트는 단일 루트 요소만 반환할 수 있습니다. 여러 요소를 렌더링하려면 <div>와 같은 컨테이너로 묶어야 합니다.

제목 아래에 이미지를 추가해 보겠습니다. <h1>과 새로운 <img> 태그 모두 <div> 안에 묶을 것입니다.

src/App.jsx 파일을 다음 코드로 업데이트합니다.

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

이 코드에서는 <img> 태그를 추가했습니다. 자체 종료 (/>) 임을 주목하세요. 또한 중괄호를 사용하여 imageUrl 변수에서 src 속성을 동적으로 설정했습니다.

파일을 저장하고 Web 8080 탭을 확인합니다. 제목 아래에 LabEx 로고가 표시되는 것을 볼 수 있습니다.

Fragment <> </>를 사용하여 여러 요소 렌더링

이 단계에서는 DOM 에 추가 노드를 추가하지 않고 여러 요소를 그룹화하는 더 나은 방법인 React Fragment 를 배우게 됩니다.

이전 단계에서는 컴포넌트가 단일 루트 요소를 반환해야 했기 때문에 <h1>과 <img> 요소를 감싸기 위해 <div>를 사용했습니다. 하지만 때로는 이 추가 <div>가 불필요하며 CSS 레이아웃 (예: Flexbox 또는 Grid) 에 간섭할 수 있습니다.

React 는 Fragment 라는 솔루션을 제공합니다. Fragment 를 사용하면 DOM 에 추가 노드를 추가하지 않고도 자식 목록을 그룹화할 수 있습니다. 축약형 구문 <> ... </>를 사용할 수 있습니다.

App 컴포넌트를 리팩토링하여 <div> 대신 Fragment 를 사용해 보겠습니다.

src/App.jsx를 열고 여는 <div>와 닫는 </div>를 각각 <>와 </>로 바꿉니다.

최종 src/App.jsx 코드는 다음과 같아야 합니다.

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

파일을 저장합니다. Web 8080 탭의 시각적 출력은 이전 단계와 동일하게 보일 것입니다. 그러나 브라우저 개발자 도구에서 HTML 을 검사하면 <h1>과 <img> 요소가 이제 부모 <div> 없이 직접적인 형제 관계임을 알 수 있습니다. 이는 더 깔끔하고 효율적인 DOM 구조를 만듭니다.

요약

React JSX Basics 실습을 완료하신 것을 축하드립니다! React 애플리케이션에서 UI 를 작성하는 기본적인 규칙과 구문을 배우셨습니다.

이 실습에서는 다음을 연습했습니다.

컴포넌트의 return 문에서 <h1>과 같은 HTML 과 유사한 요소를 작성합니다.
중괄호 {}를 사용하여 동적 JavaScript 변수와 표현식을 마크업에 포함합니다.
className 속성을 사용하여 CSS 클래스를 적용합니다.
/> 구문을 사용하여 <img>와 같은 요소에 자체 종료 태그를 사용합니다.
React Fragment (<> </>) 를 사용하여 추가 DOM 노드를 추가하지 않고 여러 요소를 그룹화합니다.

이러한 개념은 React 로 복잡하고 동적인 사용자 인터페이스를 만드는 데 필요한 구성 요소입니다. JSX 의 강력함과 유연성에 더 익숙해지도록 계속 연습하세요.