React 기본 개념과 JSX 문법

React는 현대적인 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 라이브러리이다. 이 글에서는 React의 기본 개념과 JSX 문법을 예제 코드와 함께 살펴보겠다.

1. React란?

React는 Facebook(현재 Meta)에서 개발한 오픈 소스 JavaScript 라이브러리로, 컴포넌트 기반으로 UI를 효율적으로 구성할 수 있도록 돕는다. React의 주요 특징은 다음과 같다.

컴포넌트 기반 구조: UI를 독립적인 컴포넌트로 나누어 관리
가상 DOM(Virtual DOM) 사용: DOM 조작을 최소화하여 성능 최적화
단방향 데이터 흐름(One-way Data Binding): 데이터가 예측 가능하게 흐름
선언형 프로그래밍(Declarative Programming): 코드 가독성과 유지보수성 향상

2. JSX 문법이란?

JSX(JavaScript XML)는 React에서 사용하는 JavaScript 확장 문법으로, HTML과 비슷한 구조를 가지고 있지만 JavaScript 코드와 결합할 수 있다. JSX를 사용하면 가독성이 높아지고 UI를 구성하는 코드가 직관적으로 작성된다.

JSX 기본 문법

JSX의 기본적인 문법을 이해하기 위해 아래 예제를 살펴본다.

import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

위 코드에서 return문 내부에 HTML과 유사한 코드를 사용할 수 있는 이유는 JSX 덕분이다.

JSX의 주요 특징

1. 반드시 하나의 부모 요소로 감싸야 함

- 만약 부모 요소 없이 여러 개의 요소를 반환하면 오류가 발생한다. 이 경우 React.Fragment 또는 빈 태그 <>...</>를 사용할 수도 있다.

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>React는 컴포넌트 기반 라이브러리이다.</p>
    </div>
  );
}

// JSX에서는 여러 개의 요소를 반환할 경우 반드시 하나의 부모 요소로 감싸야 한다.
function App() {
	return ( 
    	<> 
            <h1>Welcome to React</h1> 
            <p>React는 컴포넌트 기반 라이브러리이다.</p> 
        </> 
    ); 
}

2. JavaScript 표현식 사용 가능

- JSX 내부에서는 {} 중괄호를 사용하여 JavaScript 표현식을 포함할 수 있다.

function Greeting() {
  const name = "React";
  return <h1>Hello, {name}!</h1>;
}

3. class 대신 className 사용

- JSX에서는 class가 아닌 className 속성을 사용해야 한다.

function Button() {
  return <button className="btn-primary">클릭하세요</button>;
}

4. 인라인 스타일 적용

- JSX에서는 style 속성을 객체 형태로 전달한다.

function StyledText() {
  const textStyle = { color: 'blue', fontSize: '20px' };
  return <p style={textStyle}>이 텍스트는 파란색이다.</p>;
}

3. React 컴포넌트 기본 구조

React의 핵심 개념인 *컴포넌트(Component)*를 이해하면 효율적인 UI 개발이 가능하다.

함수형 컴포넌트

함수형 컴포넌트는 간단한 구조로 작성할 수 있으며, 주로 상태를 갖지 않는 경우 사용된다.

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

클래스형 컴포넌트(현재는 잘 사용하지 않음)

클래스형 컴포넌트는 state를 사용할 수 있으며, React 16.8 이전에는 주로 사용되었다.

하지만 현재는 React Hooks의 등장으로 함수형 컴포넌트가 더 많이 사용된다.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

4. 마무리

React는 강력한 컴포넌트 기반 라이브러리이며, JSX를 활용하면 직관적인 UI 개발이 가능하다. 이번 글에서는 React의 기본 개념과 JSX 문법을 살펴보았으며, 앞으로 컴포넌트 구조와 상태 관리(State Management) 등을 더 깊이 다룰 예정이다.