[TIL-260120] React 기초: JSX, 컴포넌트, state

이 글은 2026년 1월 21일에 작성된 글입니다.

JSX

JSX(Javascript Syntax Extension): 자바스크립트 확장 문법. Javascript와 XML/HTML을 합친 것.

• JSX는 내부적으로 XML/HTML코드를 자바스크립트로 변환하는 과정(번들링)을 거치므로 JSX 코드는 최종적으로 자바스크립트 코드로 출력된다.

// JSX 사용한 코드
const element = (
        <h1 className="greeting">
                Hello, world!
        </h1>
)
// JSX 사용하지 않은 코드
const element = React.createElement(
        'h1',
        {className: 'greeting'},
        'Hello, world!'
)

• JSX 장점
  • 코드가 더 간결해짐
  • 가독성 향상
  • 보안성 올라감(Injection Attack)
  • ReactDOM은 변수에 임베딩 된 값을 모두 문자열로 변환하기 때문에 선언되지 않은 값은 들어갈 수 없음. 결과적으로 cross-site-scripting (XSS) 방어할 수 있음.

예제 1. Book, Library 컴포넌트 만들고 index.js에 import해서 렌더링 해보기

원래는 index.js가 App.js를 가져다가 화면에 보이게 렌더링을 시켜줬음.

// src/ex01/Library.jsx

import React from "react";
  function Book(props) {
    return (
      <div>
        <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
        <h2>{`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`}</h2>
      </div>
    );
  }
  exportdefault Book;

root.render(): 컴포넌트를 페이지에 렌더링하는 역할. react-dom을 불러와 사용 가능. id가 root인 요소 안에 렌더링 하도록 되어 있음.

// src/index.js

// Library 컴포넌트를 가져옴
import Library from './ex01/Library';

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StricMode>
      <Library /> // Library 렌더링
    </React.StricMode>
);

최종적으로 index.js는 컴포넌트를 가져와 index.html의 <div>요소 안에 연결시킴.
그리고 터미널에 npm start 하면 웹 페이지가 뜸.

예제 2. Clock 컴포넌트 만들고 현재 시간 불러오기

// src/ex02/Clock.jsx

import React from "react";
function Clock(props) {
  return (
    <div>
      <h1>안녕, 리액트!</h1>
      <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
    </div>
  );
}
export default Clock;

// src/index.js

import Clock from './ex02/Clock'; // Clock 컴포넌트 import

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(() => { // 일정한 시간 간격으로 특정 코드를 반복 실행
  root.render(
    <React.StrictMode>
      <Clock /> // 렌더링
    </React.StrictMode>
  );
}, 1000); // 1초마다 (1000ms)

 

---

컴포넌트

리액트에서의 컴포넌트: 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것.

props: 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체. props의 값은 읽기 전용.

• 클래스 컴포넌트
  • state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다.
  • render 함수가 꼭 있어야 하고, 보여 주어야 할 JSX를 반환해야 한다.
• 함수형 컴포넌트
  • 클래스형 컴포넌트보다 선언하기가 훨씬 편하다.
  • 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
  • 프로젝트 빌드 후 배포할 때에도 결과물의 파일 사이즈가 더 작다.
  • state와 라이프사이클 API 사용이 불가했지만 리액트 v16.8 업데이트 이후 Hook 기능이 도입되면서 해결되었다.

---

state

리액트 컴포넌트의 상태. 리액트 컴포넌트의 변경 가능한 데이터.

 

클래스 컴포넌트 → state를 생성자에서 정의
함수형 컴포넌트 → useState()라는 훅을 사용하여 정의

예제 1. 카운터 버튼 만들기

클래스형 컴포넌트에서 state 사용하기

// src/ex03/Counter.js

// Component를 상속받기 때문에 import도 해줘야 함
import React, { Component } from 'react';

// 클래스형 컴포넌트
class Counter extends Component { 
    constructor(props){
        super(props);
        // state의 초기값 설정: 객체 형식이어야 함
        this.state = { number : 0 }
    }
    render() {
        const {number} = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={() => {
                        this.setState(
                            {number: number + 1},
                            () => {
                                console.log("방금 setState가 호출되었습니다.");
                                console.log(this.state);
                            }
                        )
                    }}
                >+1</button>
            </div>
        );
    }
}

export default Counter;

// src/App.js

import Counter from'./ex03/Counter';
function App(props) {
    return<Counter />
}
exportdefaultApp;

예제 2. 입장과 퇴장 버튼, 텍스트의 색상 변경

함수형 컴포넌트에서 useState() 사용하기.
useState()는 한 컴포넌트에서 여러 번 사용 가능하다.

// /src/ex03/Say.js

import React, { useState } from 'react';
// 함수형 컴포넌트
const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');
    const [color, setColor] = useState('black');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{ color: color }}>{message}</h1>
            <button style={{ color: 'red'}} onClick={() => setColor('red')}>빨간색
            </button>
            <button style={{ color: 'green'}} onClick={() => setColor('green')}>초록색
            </button>
            <button style={{ color: 'blue'}} onClick={() => setColor('blue')}>파란색
            </button>
        </div>
    )
}
export default Say;

// /src/App.js

import Say from "./ex03/Say"
function App() {
  return (
    <Say />
  );
}

export default App;

---

❕느낀점

사실 어제건데 너무 피곤해서 오늘 아침(1/21)에 작성했다.

어제부터 리액트에 대한 실습을 진행하면서 프론트엔드도 만만치 않다는 걸 느꼈다..ㅋㅋㅋ 백엔드보다는 확실히 쉽겠지~했는데 확실히 이쪽도 초반부터 복잡하다.. App.js를 바꾸는 방법과 index.js를 바꾸는 방법이 있고 각각의 사용이 조금씩 달라서 헷갈리고 복잡한 것 같다. 아직은 익숙하지 않아서 그렇고 나중되면 어제 한 내용은 쉽게 느껴질 것이라 생각한다..

앞으로 진행하는 프론트엔드 프로젝트도 리액트로 진행할 것이라 계속해서 손에 익는게 중요할 것 같다. 리액트 화이팅...