React - JSX - 기초 문법

2025. 5. 19. 16:14·React

React JSX 기초 문법 정리

1. useState로 상태 관리하기

useState()는 React 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 Hook입니다.

import { useState } from 'react';

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

  return (
    <>
      <h1>카운터 예제</h1>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </>
  );
}

※ const [변수이름, 변경함수] = useState(초기값) 형식은 구조 분해 할당을 통해 상태(state) 값을 선언하는 방법입니다.
※ [count, setCount]는 구조 분해 할당이며, count는 상태 값, setCount()는 해당 값을 변경하는 함수입니다.
※ 상태가 변경되면 React가 자동으로 화면을 다시 렌더링합니다.

2. JSX란?

JSX는 JavaScript 확장 문법으로, 마치 HTML처럼 보이는 문법을 사용해 UI를 만들 수 있게 해줍니다.
하지만 내부적으로는 React.createElement()로 변환됩니다.

3. 반드시 하나의 부모 요소로 감싸야 한다

function App() {
    return (
        <div>
            <div>첫번째 DIV</div>
            <div>두번째 DIV</div>
        </div>
    )
}

※ 여러 태그를 묶을 때는 반드시 하나의 부모 요소로 감싸야 합니다.

3-1. Fragment 사용

import { Fragment } from 'react';

function App() {
    return (
        <Fragment>
            <div>첫번째 DIV</div>
            <div>두번째 DIV</div>
        </Fragment>
    )
}

3-2. Fragment 단축 표현

function App() {
    return (
        <>
            <div>첫번째 DIV</div>
            <div>두번째 DIV</div>
        </>
    )
}

4. JSX 안에서 자바스크립트 표현식 사용

function App() {
    const name = "홍길동";
    const age = 23;

    return (
        <>
            <h1>안녕, {name}</h1>
            <h2>나이는 {age}세 입니다.</h2>
            <h2>내년에는 {age + 1}세가 됩니다.</h2>
        </>
    )
}

5. 조건문은 삼항 연산자 또는 && 연산자로

function App() {
    const name = "홍길동";

    return (
        <h1>
            { name === "홍길동" ? "환영합니다." : "환영하지 않습니다." }
        </h1>
    )
}

5-1. AND 연산자 사용 예시

function App() {
    const isLoggedIn = true;

    return (
        <>
            <h1>홈페이지입니다</h1>
            {isLoggedIn && <p>로그인되었습니다.</p>}
        </>
    )
}

6. class 속성은 className으로 작성

function App() {
    return (
        <div className="container">
            Hello
        </div>
    )
}

7. 주석 다는 방법

function App() {
    return (
        <>
            {/* 이렇게 주석 작성 */}
            <div>내용입니다</div>
        </>
    )
}

8. 인라인 스타일 적용 방법

// 스타일 객체 직접 적용
function App() {
    return (
        <div style={{ color: "blue", fontSize: "20px", backgroundColor: "lightgray" }}>
            스타일이 적용된 텍스트입니다.
        </div>
    );
}
// 스타일 객체를 변수로 따로 선언한 경우
const myStyle = {
    color: "white",
    backgroundColor: "black",
    padding: "10px",
    borderRadius: "8px"
};

function App() {
    return (
        <div style={myStyle}>
            객체 형태의 스타일 변수 적용 예시
        </div>
    );
}

9. 함수형 컴포넌트 vs 클래스형 컴포넌트

React에서는 컴포넌트를 작성할 때 함수형 컴포넌트 + Hook 방식이 최신 표준이며 가장 많이 사용됩니다.

함수형 컴포넌트

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

export default Welcome;

클래스형 컴포넌트

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

export default Welcome;

비교 요약

| 구분        | 함수형 컴포넌트         | 클래스형 컴포넌트          |
|-------------|--------------------------|-----------------------------|
| 정의 방식   | 함수 (function)          | 클래스 (class)              |
| props 접근 | props.name               | this.props.name             |
| 상태 관리   | useState, useEffect 등   | this.state, this.setState() |
| 코드 구조   | 간결하고 최신 방식       | render() 필요, 문법 복잡함  |

10. 전체 요약

  • JSX는 JavaScript 코드 안에서 HTML처럼 UI를 구성할 수 있는 문법
  • 컴포넌트는 반드시 하나의 부모 요소로 감싸야 하며, Fragment로 감쌀 수 있음
  • { } 안에 JS 표현식(변수, 연산 등) 사용 가능
  • 조건부 렌더링은 ? : 또는 && 연산자를 사용
  • HTML의 class는 className으로, for는 htmlFor로 작성
  • 스타일은 객체로 지정하고, 속성은 카멜표기법으로 작성
  • JSX 내부 주석은 {/* */} 형태로만 사용 가능
  • 상태 관리를 위해 useState 등 Hook을 사용하며, 함수형 컴포넌트가 권장됨

'React' 카테고리의 다른 글

React + FastAPI로 JWT 인증 기반 이벤트 관리 시스템 만들기  (0) 2025.05.23
React - Router  (0) 2025.05.20
React - props, 이벤트 핸들러  (0) 2025.05.20
React - Vite를 사용한 React 앱 개발  (0) 2025.05.19
'React' 카테고리의 다른 글
  • React + FastAPI로 JWT 인증 기반 이벤트 관리 시스템 만들기
  • React - Router
  • React - props, 이벤트 핸들러
  • React - Vite를 사용한 React 앱 개발
jaeon.cloud
jaeon.cloud
  • jaeon.cloud
    JEONG JAE ON
    jaeon.cloud
  • 전체
    오늘
    어제
    • 분류 전체보기 (60)
      • Docker (8)
      • Cloud (7)
      • AWS (14)
      • Network (9)
      • Linux (1)
      • Python (7)
      • Javascript (3)
      • React (5)
      • Project (3)
      • Kubernetes (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    lambda
    3-tier Architecture
    네트워크
    Python
    docker
    http
    react
    kubernetes
    AWS
    클라우드
    cors
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
jaeon.cloud
React - JSX - 기초 문법
상단으로

티스토리툴바