React - 리액트의 핵심 개념 JSX 문법 이해하기 변수사용

11월 11, 2025

React - 리액트의 핵심 개념 JSX 문법 이해하기 변수사용

jsx

부제:jsx는 혁명이다! 리액트는 혁명이다!

1)변수

자바스크립트 오브젝트를 {}안에 사용할수 없다 그래서 오브젝트의 속성을 사용해야한다

{}안에 if문이나 for문도 사용불가능하다

<img>태그처럼 single로 사용하는 태그도 <img/>처리해야한다

즉,무조건 종료태그가 있어야한다

//자바스크립트 영역
const Header = ()=>{
    const user = {
        id:"bts",
        name:"석진",
        isLogin:true

    }

    //jsx의 탄생이유
    //필자는 정말정말 웹이 싫다
    //C#은 좋은데 3가지는 싫은이유 간단하다
    //언어가 여러개라 싫다
    //해결방법은 2가지 세상의 모든 자바스크립트를 없애기
    //or새언어 만들기

    //화면에 보여질 페이지를 구성 html의 영역
    //여기서 자바스크립트 하려면 {}안에 자바스크립트 사용해라
    return <header>
            <h1>header</h1>
            {
                user.isLogin?(<div>로그인</div>):(<div>노 로그인</div>)
            }
        </header>
}

export default Header

리액트에서는

컴포넌트를 작성할때 jsx를 이용해서 작업한다

jsx는 자바스크립트 Syntax Extention

-jsx는 자바스크립트 확장문법

-jsx를 사용하면 자바스크립트와 html문법을 동시 사용가능하다

-즉 자바스크립트안에서 html도 한 파일로 관리 가능하다

-jsx가 아니면 domapi를 사용하는방식 밖에 없다

const user = <h1>hello<h1/>

자바스크립트 + html 역시 나만 이런생각 한게 아니야!

- return문 다음에 ()추가해서 작업하기

jsx는 한개의 엘리먼트만 리턴이 가능하다 이게 뭔말인데? 이거 설명 붙여넣어

좋아요! 당신이 말한 “JSX는 한 개의 엘리먼트만 리턴이 가능하다”라는 말의 의미를 자세히 설명해줄게요.

1. JSX란?

JSX는 JavaScript XML의 약자로, 자바스크립트 안에서 HTML처럼 생긴 코드를 쓸 수 있게 해주는 문법이에요.
예를 들어:


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

이런 식으로 HTML 태그처럼 쓰지만, 실제로는 자바스크립트 객체로 변환돼요.

2. “한 개의 엘리먼트만 리턴 가능하다” 의미

React 컴포넌트는 JSX를 return해서 화면에 보여주는데, JSX는 반드시 하나의 최상위(root) 엘리먼트를 가져야 한다는 규칙이 있어요.

즉, 이렇게 여러 개를 바로 반환하면 오류가 나요:


function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>  {/* ❌ 오류 발생 */}
  );
}

왜냐하면 JSX는 하나의 부모 엘리먼트 안에서만 여러 자식 엘리먼트를 감쌀 수 있기 때문이에요.

3. 해결 방법

(1) `<div>`로 감싸기


function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

(2) React.Fragment 또는 빈 태그 `<>` 사용


function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

<></>나 <React.Fragment></React.Fragment>를 사용하면 실제 DOM에 추가적인 <div>가 생기지 않으면서 여러 엘리먼트를 묶을 수 있어요.

✅ 요약

JSX는 반드시 하나의 최상위 엘리먼트만 반환해야 함.
여러 요소를 반환하려면 <div>나 <React.Fragment>로 감싸야 함.
이렇게 해야 React가 JSX를 올바르게 해석하고 렌더링할 수 있음.

원하면 제가 왜 React가 이런 규칙을 만든 건지까지 그림과 함께 쉽게 설명해줄 수도 있어요.
혹시 그거까지 보고 싶나요?

네

좋아요! 그럼 “왜 React가 JSX에서 한 개의 최상위 엘리먼트만 반환하게 만들었는지”를 그림과 함께 쉽게 설명해볼게요.

1️⃣ 문제 상황: 여러 루트 엘리먼트가 있을 때

JSX에서 이렇게 여러 최상위 엘리먼트를 바로 반환한다고 가정해봅시다:


function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>
  );
}

React가 내부적으로 하는 일은, JSX를 자바스크립트 객체로 변환하는 거예요.

즉 위 코드는 사실 이렇게 변환됩니다:


React.createElement("h1", null, "Title");
React.createElement("p", null, "Paragraph");

문제는 여기서 React는 한 컴포넌트가 하나의 객체만 반환하기를 기대한다는 거예요.
즉, 두 개를 반환하려고 하면 **“어디가 최상위 노드인지”**를 React가 알 수 없게 돼요.

2️⃣ 해결: 하나의 최상위 엘리먼트로 묶기

React는 모든 JSX를 하나의 트리 구조로 관리해요.
그래서 여러 요소를 하나의 루트로 감싸면 트리가 명확해집니다:


function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

이렇게 하면 내부적으로 이렇게 트리 구조가 만들어져요:


<div>
 ├─ <h1>Title</h1>
 └─ <p>Paragraph</p>

React가 이 구조를 쉽게 DOM에 렌더링하고 업데이트할 수 있게 되는 거죠.

3️⃣ React.Fragment의 등장

하지만 <div>를 항상 넣으면, DOM에 불필요한 <div>가 생겨서 레이아웃에 영향을 줄 수 있어요.
그래서 React는 Fragment라는 특수한 “투명 컨테이너”를 만들었어요:


function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

이 경우 실제 DOM에는 아무 것도 생기지 않고, React 내부 트리에서만 두 엘리먼트가 묶이게 돼요.


React 트리: (Fragment)
 ├─ <h1>Title</h1>
 └─ <p>Paragraph</p>

4️⃣ 정리

원래 규칙: JSX는 하나의 최상위 엘리먼트만 반환 가능.
이유: React는 컴포넌트를 트리 구조로 관리하고, 여러 최상위 노드는 트리 구조를 깨뜨리기 때문.
해결 방법:
1. <div>로 감싸기
2. <React.Fragment> 또는 <>로 감싸기 (DOM에 추가 요소 없음)

원하면 제가 이걸 그림으로 시각화해서 한눈에 이해할 수 있는 도식으로 만들어줄 수도 있어요.
그림으로 보면 규칙이 훨씬 직관적으로 이해돼요.

JSX 최상위 엘리먼트 규칙 도식

❌ 잘못된 예 (Multiple top-level elements)


function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>
  );
}

React 내부 트리 구조:


<h1>Title</h1>   <p>Paragraph</p>   <-- ❌ 두 개 루트라 트리 구조 불가

React가 "어디가 루트인지?"를 알 수 없어서 오류 발생.

✅ 올바른 예 1: <div>로 감싸기


function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

React 내부 트리 구조:


<div>                 <-- ✅ 하나의 루트
 ├─ <h1>Title</h1>
 └─ <p>Paragraph</p>

✅ 올바른 예 2: Fragment로 감싸기


function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

React 내부 트리 구조:


(Fragment)            <-- ✅ 하나의 루트, DOM에 추가 요소 없음
 ├─ <h1>Title</h1>
 └─ <p>Paragraph</p>

원하면 제가 이걸 컬러 블록과 화살표를 넣은 ASCII 아트 형태로 만들어서, 시각적으로 바로 이해되게 할 수도 있어요.

만들어드릴까요?

이 블로그 검색

Faith & Tech