[DevCamp] 리액트와 JSX 기초 이해

동건·2025년 4월 7일

DevCamp

목록 보기

42/85

리액트(React)는 페이스북에서 개발한 자바스크립트 기반의 사용자 인터페이스(UI) 라이브러리이다. 리액트는 웹 애플리케이션의 복잡한 UI를 효율적으로 구성하고 관리할 수 있도록 돕는 도구로, 단방향 데이터 흐름과 컴포넌트 기반 구조를 핵심 개념으로 삼는다.

컴포넌트 기반 아키텍처
리액트는 전체 UI를 여러 개의 독립적이고 재사용 가능한 컴포넌트로 나눈다. 각 컴포넌트는 자신만의 상태(state)와 속성(props)을 가지며, 이를 바탕으로 화면을 구성한다.
Virtual DOM
리액트는 가상 DOM(Virtual DOM)을 사용하여 실제 DOM 변경을 최소화한다. 상태가 변경되면 가상 DOM과 기존 DOM을 비교(diffing)하고, 바뀐 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다.
선언형(Declarative) 방식
리액트는 UI를 선언적으로 구성한다. 개발자는 “무엇을 할지”를 선언하면, 리액트가 내부적으로 “어떻게 할지”를 처리해준다. 이 방식은 코드 가독성과 유지보수성을 높인다.
단방향 데이터 흐름
리액트는 데이터가 항상 한 방향(부모 → 자식)으로 흐르도록 설계되어 있다. 이 덕분에 데이터 흐름을 쉽게 추적하고 디버깅할 수 있다.
풍부한 생태계
상태 관리(Redux, Recoil), 라우팅(React Router), 정적 사이트 생성(Gatsby), SSR(Next.js) 등 다양한 도구와 함께 사용할 수 있어 확장성이 뛰어나다.

JSX(JavaScript XML)는 자바스크립트 코드 안에서 XML 형식의 태그를 작성할 수 있게 해주는 문법이다. JSX는 브라우저가 직접 이해할 수는 없으며, Babel 등의 트랜스파일러를 통해 순수 JavaScript로 변환되어 동작한다.

JSX를 사용하면 UI 구조를 마치 HTML처럼 직관적으로 표현할 수 있기 때문에 가독성이 높고, 컴포넌트 설계에 적합하다.

하나의 부모 요소로 감싸야 한다
JSX에서 여러 개의 태그를 반환할 경우 반드시 하나의 부모 요소로 감싸야 한다. 이를 통해 컴포넌트가 올바르게 렌더링된다.
```
return (
  <div>
    <h1>안녕하세요</h1>
    <p>리애트를 배우보자.</p>
  </div>
);
```
혹은 <></>로 감싸는 Fragment 문법도 자주 사용된다.
JavaScript 표현식 사용 가능
JSX 내부에서는 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있다.
```
const name = 'React';
return <h1>{name} 배우기</h1>;
```
HTML과 다른 속성 이름
HTML에서 사용하는 class나 for 속성은 JSX에서 각각 className, htmlFor로 변경되어야 한다. 이는 JavaScript의 예약어와 충돌을 피하기 위함이다.
```
return <label htmlFor="email">이메일</label>;
```
조건부 렌더링
JSX는 조건문을 직접 사용할 수 없기 때문에 삼항 연산자(? :) 또는 && 연산자를 활용하여 조건부로 요소를 렌더링한다.
```
{isLoggedIn ? <p>환영합니다</p> : <p>로그인해주세요</p>}
```
자바스크립트 함수 호출 가능
JSX 내에서 이벤트 핸들러나 렌더링 로직을 함수 형태로 작성하고 사용할 수 있다.
```
function greet(name) {
  return `안녕하세요, ${name}님`;
}

return <h1>{greet('홍길동')}</h1>;
```