[React] JSX 문법 + 단방향 바인딩 + VDOM

 

"컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

---

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

"위에 희한한 태그 문법은 문자열도, HTML도 아닙니다."

 

React는 라이브러리지만, 프레임워크와 유사하게 다양한 기능을 제공한다. 그 중에서도 JSX 문법, 단방향 데이터 바인딩, Virtual DOM(VDOM), 렌더 사이클이 React의 주요 특징이다.

 

JSX 문법

JSX는 JavaScript XML 또는 JavaScript Syntax Extension으로 불린다. JSX는 JavaScript와 XML(또는 HTML)요소를 결합한 문법으로, React에서 컴포넌트를 정의하는 방법이다. 일반적으로 JavaScript 코드 내에서 HTML 요소를 작성하는 방식이기 때문에 마크업과 로직을 한 곳에서 다룰 수 있는 장점이 있다.

JSX 문법의 특징

• JSX는 JavaScript 내에서 HTML 요소를 정의할 수 있는 문법이다.
• React에서 사용되는 모든 컴포넌트는 JSX를 통해 화면에 렌더링된다.

예시 비교:

 

1.  Angular처럼 마크업과 로직을 분리하는 방식

• HTML(마크업) 파일은 UI를 정의하고, JavaScript(로직) 파일은 기능을 정의한다. 이 방식은 명시적으로 파일을 나누어 작성해야 한다.

<!-- HTML -->
<h2>Product Details</h2>
<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>
  <button type="button" (click)="addToCart(product)">Buy</button>
</div>

// JavaScript
@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent {
  product: Product | undefined;
  addToCart(product: Product) {
    this.cartService.addToCart(product);
  }
}

 

2. React와 Vue처럼 컴포넌트를 하나의 파일에서 작성하는 방식

• React는 HTML과 JavaScript를 하나의 컴포넌트 파일 내에서 정의한다. 이로 인해 한 곳에서 UI와 로직을 관리할 수 있다.

function ProductDetails({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <h4>{product.price}</h4>
      <p>{product.description}</p>
      <button onClick={() => addToCart(product)}>Buy</button>
    </div>
  );
}

 

 

JSX 문법의 장점

1. JS와 HTML을 한파일에서 관리

• React 컴포넌트는 UI와 로직을 하나의 파일로 작성하여 개발 효율성을 높인다. 이는 컴포넌트를 독립적이고 재사용 가능한 단위로 만들어준다.

 

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
    </>
  )
}

export default App

React 컴포넌트 예: HTML or XML + JS + CSS 모두 하나의 `.jsx` 파일 내 존재

 

2. JSX는 결국 JS로 컴파일됨

• JSX는 브라우저에서 직접 실행될 수 없기 때문에, Bable에 의해 JSX를 JavaScript로 컴파일한다.

const element = <h1 className="greeting">Hello, World!"</h1> // This is JSX

 

 이 코드는 컴파일 시 아래와 같이 변환된다.

const element = React.createElement('h1', { className: 'greeting' }, 'Hello, World!');

JSX 제약사항

1. JSX는 무조건 하나의 요소로 반환되어야하기에, 여러 요소를 작성하려면 하나의 태그로 감싸야한다.

<div>
	<h1>오늘의 할 일</h1>
	<ul>
		<li>빨래하기</li>
		<li>숙제하기</li>
		<li>1시 약속</li>
	</ul>
</div>

// 감싸주는 노드를 사용하고 싶지 않을 경우 Fragment를 사용
<React.Fragment>
</React.Fragment>
// or
<>
</>

 

2. `class`가 ES6(JS)의 클래스 문법의 예약어이기에 대신하여 `className` 사용

<div className="container">
</div>

 

3. JS 로직(변수나 함수)을 넣기 위해서는 중괄호를 열어서 그 안에 JS로직을 넣어야 함 `{}`

function Container({ children }) {
 const title = '오늘의 할 일';
	
 return (
   <div>
   <h1>{title}</h1>
   {children}
   </div>
 )
}

 

기타 문법

• 주석: HTML, XML 주석 표현 법 `<!-- 주석 -->` 이 아닌 `{/* 주석 */}` 사용
• React Component(Element)가 JSX로 작성되면 대문자로 시작해야함.
  • 소문자로 시작하는 Element는 HTML Element로 인식

function TodoList() {
	return (
		<Container>
			<div>
				<span>1</span>
				<span>2</span>
				<span>3</span>
			</div>
		</Continer>
	)
}

• 조건부 렌더링은 if문이 아닌 삼항연산자 사용

function TodoList() {
	const todoList = []
	return (
		<Container>
			<div>
				{todoList.length > 0 ?
					todoList.map(todo => <div key={todo.id}>{todo.value}</div>)
				: "새로운 할 일을 입력해보세요."}
			</div>
		</Continer>
	)
}

• 여러 HTML 엘리먼트를 표시할 때는 `map` 함수 사용
  • `map`함수를 사용 시 반드시 `key` 속성 표시 필수, 그렇지 않으면 경고 표기

---

단방향 바인딩: 함수형 컴포넌트와 Hook

 

React에서 단방향 데이터 바인딩은 데이터를 Model(상태)에서 View(UI)로 흐르게 하는 방식으로, 데이터가 한 방향으로만 흐른다는 것을 의미한다. 이는 상태가 변견되면 화면이 자동으로 업데이트되는 구조를 만들며, React는 이를 기반으로 컴포넌트 기반 UI를 렌더링한다.

 

MVC를 예시로 설명

• View(HTML): "화면에 보이는 것, 화면" ← Rendering
• Model(JS): "브라우저 메모리에 있는 데이터" ← Data
• Controller(JS):"Model(값)을 변경하는 함수" ← "Event" Handling ≒ "Data" Handling

---

 

 

1. 바인딩의 개념

 

바인딩은 View(화면)와 Model(브라우저 메모리의 데이터)를 일치시키는 작업이다. 즉, 데이터가 변경되면 화면에 그 데이터가 반영되도록 하고, 화면이 업데이트될 때마다 상태가 변경되도록 동기화하는 과정을 의미한다.

 

2. 과거의 클래스 컴포넌트 vs 현재의 함수형 컴포넌트

 

• React는 과거에 클래스 컴포넌트를 사용했지만, 함수형 컴포넌트와 Hooks가 도입된 이후로 함수형 컴포넌트가 주로 사용되고 있다.
  • 클래스 컴포넌트에서는 복잡한 메서드와 생명주기 함수를 사용하여 상태 관리와 UI 업데이트를 처리했다.
  • 반면, 함수형 컴포넌트는 직관적인 함수 기반 로직으로 동작하며, React의 상태 관리와 사이드 이펙트 처리도 더 명확하게 구분되어 있다.

3. 단방향 데이터 바인딩과 함수형 컴포넌트

• React의 단방향 데이터 바인딩은 상태 변화가 생기면 이를 기반으로 UI를 다시 렌더링한다.
  • Model(상태) → View(UI)의 흐름을 유지하며, 상태변경 핸들러(`setState`)를 통해 상태를 업데이트한다.
  • 상태가 변경될 때마다 컴포넌트는 다시 렌더링되어 UI가 최신 상태로 업데이트된다.

4. React Hooks: 함수형 컴포넌트에서 상태와 효과를 처리하는 방법

• Hooks는 함수형 컴포넌트에서 상태 관리와 사이드 이펙트 처리를 쉽게 해주는 API이다.
  • `useState`: 상태 관리를 위한 Hook으로, 컴포넌트 내부에서 상태를 관리할 수 있다.
  • `useEffect`: 사이드 이펙트(예: API 호출, 데이터 변경에 따른 리렌더링)를 처리하는 Hook.

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

• `useState`를 사용하여 `count` 상태를 관리하고, `useEffect`로 상태가 변경될 때마다 브라우저 타이틀을 업데이트한다. 이처럼 함수형 컴포넌트에서 상태와 사이드 이펙트를 쉽게 처리할 수 있다.

5. Hooks 사용 규칙

• Hooks는 반드시 함수의 최상위에서 호출되어야 한다. 이는 React가 컴포넌트의 렌더링 순서에 맞춰 상태와 효과를 관리할 수 있도록 하기위한 규칙이다.
  • 반복문, 조건문, 중첩된 함수 안에서 Hooks를 호출하면 안된다. 이렇게 되면 렌더링 순서가 깨지면서 문제가 발생할 수 있다.

const Example = () => {
  // ✅ - 올바른 사용
  const [count, setCount] = useState(0);

  // ❌ - 조건문 안에서 사용 불가
  if (count > 0) {
    const [otherState, setOtherState] = useState(false); // 이렇게 사용하면 안 됨
  }

  return <div>{count}</div>;
};

 

---

ℹ️참고

[ASAC 6기 강의자료]

https://blog.stackademic.com/react-data-binding-a-comprehensive-guide-to-one-way-and-two-way-binding-6fb945add5ed

React Data Binding: A Comprehensive Guide to One-Way and Two-Way Binding

https://hackernoon.com/react-functional-components-are-the-future

React Functional Components are the future | HackerNoon