본문 바로가기
카테고리 없음

React 첫걸음: JSX와 컴포넌트, 레고 블록처럼 쉽게 이해하기

by 파이썬코딩실험실 2025. 4. 5.

React 첫걸음: JSX와 컴포넌트, 레고 블록처럼 쉽게 이해하기

React를 시작하려는데 JSX와 컴포넌트라는 용어 때문에 막막하신가요? 이 글에서는 마치 레고 블록을 조립하듯, React의 핵심 개념인 JSX와 컴포넌트를 쉽게 풀어 설명하고, 실제 코드를 통해 바로 적용할 수 있도록 안내합니다.

React를 처음 접하는 개발자, 혹은 웹 개발에 대한 기본적인 이해가 있는 입문자라면 이 글을 통해 React의 핵심 개념을 완벽하게 이해하고, 자신감을 얻어 개발 여정을 시작할 수 있습니다. 개인적인 경험을 바탕으로, JSX와 컴포넌트가 왜 중요한지, 그리고 실제 프로젝트에서 어떻게 활용되는지에 대한 깊이 있는 통찰력을 얻을 수 있을 것입니다.

🧱 JSX, React 코딩의 혁신: HTML을 JavaScript 안으로

JSX는 "JavaScript XML"의 약자로, HTML과 매우 유사하게 생겼지만, JavaScript 코드 안에서 UI를 묘사할 수 있게 해주는 특별한 문법입니다. 마치 레고 블록처럼, JSX를 사용하면 UI 요소를 직관적으로 코드로 표현할 수 있습니다.

const element = <h1>Hello, world!</h1>;

위 코드는 언뜻 보면 HTML처럼 보이지만, 실제로는 React가 이해할 수 있는 특별한 형태입니다. React는 이 JSX 코드를 JavaScript 함수 호출로 변환하여 실제 DOM에 반영합니다. 즉, JSX는 HTML처럼 보이지만, JavaScript 코드를 더욱 읽기 쉽고 관리하기 용이하게 만들어주는 도구인 셈입니다.

const element = React.createElement('h1', null, 'Hello, world!');

JSX는 단순한 HTML 대체재가 아닙니다. 다음과 같은 강력한 특징들을 제공합니다.

특징설명

태그 닫기 필수 <img />, <br /> 처럼 모든 태그를 반드시 닫아야 합니다.
JavaScript 표현식 사용 중괄호 {} 를 사용하여 JavaScript 값을 JSX 내에서 출력할 수 있습니다.
단일 부모 요소 여러 개의 태그를 반환할 때는 반드시 하나의 부모 요소로 감싸야 합니다. (<div> 또는 <>)

JSX를 처음 접했을 때, HTML과 JavaScript를 섞어 쓰는 것이 어색하게 느껴졌습니다. 하지만 JSX를 통해 코드가 훨씬 간결해지고 UI를 직관적으로 관리할 수 있다는 것을 깨닫고 나서, React 개발에 푹 빠지게 되었습니다.

🧩 컴포넌트, React UI 구축의 핵심 레고 블록

컴포넌트는 React 애플리케이션을 구성하는 가장 기본적인 단위입니다. UI의 독립적이고 재사용 가능한 부품이라고 생각하면 됩니다. 마치 레고 블록처럼, 컴포넌트를 조합하여 복잡한 UI를 구축할 수 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위 코드는 함수형 컴포넌트의 가장 간단한 예시입니다. Welcome이라는 함수는 props라는 인자를 받아 JSX를 반환합니다. 이 컴포넌트는 다음과 같이 사용할 수 있습니다.

<Welcome name="React" />

컴포넌트는 마치 HTML 태그처럼 보이지만, 실제로는 JavaScript 함수를 실행하는 것입니다. name="React"는 props라는 객체에 name이라는 속성을 React라는 값으로 전달하는 것을 의미합니다.

컴포넌트의 핵심은 다음과 같습니다.

  • 재사용성: 한 번 만든 컴포넌트는 필요에 따라 여러 번 재사용할 수 있습니다.
  • 독립성: 각 컴포넌트는 독립적으로 동작하므로, 코드 유지보수가 용이합니다.
  • 조합성: 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만들 수 있습니다.

저의 경험에 따르면, 컴포넌트를 작고 명확하게 설계하는 것이 중요합니다. 하나의 컴포넌트가 너무 많은 역할을 수행하면 코드 가독성이 떨어지고 유지보수가 어려워집니다. 컴포넌트를 잘게 쪼개고 재사용성을 높이는 것이 React 개발의 핵심이라고 생각합니다.

🚀 실전 예제: 프로필 카드 컴포넌트 만들기

이제 JSX와 컴포넌트의 개념을 이해했으니, 실제 코드를 통해 프로필 카드 컴포넌트를 만들어 보겠습니다.

function ProfileCard(props) {
  return (
    <div className="card">
      <img src={props.image} alt={props.name} />
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

위 코드는 프로필 카드 컴포넌트를 정의합니다. 이 컴포넌트는 다음과 같은 props를 받습니다.

  • image: 프로필 이미지 URL
  • name: 프로필 이름
  • bio: 프로필 소개

이 컴포넌트는 다음과 같이 사용할 수 있습니다.

결과적으로, 다음과 같은 HTML 구조가 생성됩니다.

냥냥이

냥냥이

나는 React를 배우는 고양이입니다.

속성설명

className CSS 클래스를 지정합니다.
src 이미지 URL을 지정합니다.
alt 이미지 대체 텍스트를 지정합니다.

프로필 카드 컴포넌트를 만들면서, JSX와 컴포넌트가 어떻게 협력하여 UI를 구성하는지 명확하게 이해할 수 있었습니다. 특히, props를 통해 컴포넌트에 데이터를 전달하고, 컴포넌트 내부에서 이 데이터를 활용하여 UI를 렌더링하는 과정이 매우 흥미로웠습니다.

🎉 React, 즐겁게 시작하세요!

이 글에서는 React의 핵심 개념인 JSX와 컴포넌트에 대해 알아보았습니다. JSX는 HTML처럼 보이지만 JavaScript 코드를 더욱 편리하게 작성할 수 있도록 도와주는 도구이며, 컴포넌트는 UI를 구성하는 재사용 가능한 부품입니다.

이제 여러분은 React 개발을 시작하기 위한 기본적인 지식을 갖추었습니다. JSX와 컴포넌트를 자유자재로 활용하여 멋진 UI를 만들어 보세요!

자주 묻는 질문

질문 1: JSX를 사용하지 않고 React 코드를 작성할 수 있나요?

답변: 네, 가능합니다. React.createElement 함수를 사용하여 JSX 없이 React 코드를 작성할 수 있지만, JSX를 사용하는 것이 훨씬 간결하고 가독성이 좋습니다.

질문 2: 컴포넌트는 항상 함수여야 하나요?

답변: 함수형 컴포넌트 외에도 클래스형 컴포넌트가 있습니다. 하지만 최근에는 함수형 컴포넌트와 Hooks를 사용하는 것이 일반적입니다.

질문 3: props는 무엇인가요?

답변: props는 컴포넌트에 전달되는 데이터입니다. props를 통해 컴포넌트는 부모 컴포넌트로부터 데이터를 전달받아 UI를 렌더링할 수 있습니다. props는 마치 함수의 인자와 같은 역할을 합니다.

티스토리툴바