React 소개

React 의 특징

페이스북(메타)에서 만든 UI를 구축하기 위한 자바스크립트 라이브러리입니다.

 

1. 컴포넌트 기반 아키텍처 (Component-Based Architecture)

React는 UI를 '컴포넌트(Component)'라는 독립적이고 재사용 가능한 조각으로 나눠서 개발합니다.

코드를 재사용하기 쉽고, 유지보수가 용이해집니다.

각각의 분리된 컴포넌트들을 조립해서 UI를 만들수 있습니다. 

예를 들어, 웹사이트의 헤더(Header), 버튼(Button), 사이드바(Sidebar)를 각각 별개의 컴포넌트로 만들 수 있습니다. 

 

2. Virtual DOM (가상 DOM)

웹 브라우저는 DOM(Document Object Model)이라는 트리 구조로 웹페이지를 표현합니다.

사용자가 버튼을 클릭하는 등 변화가 생기면 이 DOM을 직접 조작해야 하는데, 이 과정은 꽤 느립니다.

React는 이 문제를 가상 DOM(Virtual DOM)으로 해결합니다.

불필요한 DOM 조작을 최소화하여 애플리케이션의 성능을 크게 향상시킵니다.

• 변화가 필요할 때, React는 실제 DOM이 아닌 메모리상의 가상 DOM을 먼저 업데이트합니다.
• 이전 가상 DOM과 새로 변경된 가상 DOM을 비교합니다 
• 정말로 변경이 필요한 부분만 찾아서 실제 DOM에 한 번에 적용합니다 

 

3. JSX(JavaScript XML)

리액트는 JSX라는 자바스크립트 확장 문법을 사용합니다.

JSX는 자바스크립트 코드 안에서 HTML과 유사한 마크업을 작성할 수 있게 해줍니다.

- 자바스크립트 방식:

React.createElement('div', {className: 'greeting'}, 'Hello, world!');

 

- JSX 방식:

<div className="greeting">
  Hello, world!
</div>

 

4. 선언형(Declarative)

React는 선언형 프로그래밍 방식을 따릅니다.

• 명령형 (Imperative): "버튼을 찾아서, 그 버튼의 텍스트를 '클릭됨'으로 바꿔라." (어떻게)
• 선언형 (Declarative): "만약 'isClicked' 상태가 true이면, 버튼 텍스트는 '클릭됨'이어야 한다." (무엇을)

개발자는 그저 특정 상태(State)일 때 UI가 어떻게 보여야 하는지만 선언하면, React가 알아서 그 상태에 맞게 DOM을 업데이트해 줍니다.

 

5. 단방향 데이터 흐름

데이터가 부모에서 자식 방향으로 흐릅니다.

 

6. Hooks

useState, useEffect 같은 Hook으로 상태와 생명주기를 관리합니다.

함수형 컴포넌트에서 React 기능을 사용할 수 있게 해주는 API입니다.

 

 

React의 장점

 

• 높은 성능: 위에서 설명한 Virtual DOM을 사용하여 매우 빠르고 효율적으로 UI를 업데이트합니다.
• 컴포넌트 재사용성: UI를 모듈화하여 개발 생산성과 유지보수 효율성을 높입니다.
• 거대한 생태계와 커뮤니티: 전 세계적으로 가장 많이 사용되는 라이브러리 중 하나라서 자료, 튜토리얼, 서드파티 라이브러리(예: React Router, Redux, Zustand)가 매우 풍부합니다.
• SEO 친화적 (부분적): Next.js나 Gatsby 같은 프레임워크와 함께 사용하면 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 쉽게 구현하여 검색 엔진 최적화(SEO)에 유리합니다.
• 대규모 서비스, 복잡한 UI, 모바일 앱 개발까지 확장하기 좋습니다. 

 

 

React의 단점

 

• 초기 학습 곡선: JSX, 컴포넌트 생명주기, Hooks, 상태 관리, 라우팅 등 처음 배워야 할 개념이 다소 많을 수 있습니다.
• 라이브러리 vs 프레임워크: React는 오직 UI(View)만 담당하는 '라이브러리'입니다. 따라서 라우팅(페이지 이동), 전역 상태 관리, 데이터 통신 등을 위해서는 별도의 라이브러리를 직접 선택하고 설정해야 하는 번거로움이 있습니다. 
• 빠른 변화 속도: React 생태계는 매우 빠르게 발전합니다. 새로운 기능(예: 클래스형 컴포넌트 -> 함수형 컴포넌트와 Hooks)에 맞춰 지속적인 학습이 필요할 수 있습니다.

 

 

카운터 만들기 예제

이 예제는 리액트의 핵심인 컴포넌트와 상태를 잘 보여줍니다.

// 1. React 라이브러리와 'useState'라는 Hook을 가져옵니다.
// useState는 컴포넌트안에서 상태를 관리하게 해주는 기본적인 도구 입니다.
import React, { useState } from 'react';

// 'Counter'라는 이름의 컴포넌트(UI 조각)를 만듭니다.
// React 컴포넌트는 항상 대문자로 시작합니다.
function Counter() {
  
  // 2. State(상태) 관리
  // 'count'라는 이름의 상태 변수를 선언하고, 이 값을 변경할 'setCount' 함수를 만듭니다.
  // useState(0)은 'count'의 초기값을 0으로 설정한다는 의미입니다.
  // setCount는 count 값을 변경할 때 사용하는 유일한 함수이므로 count = count + 1 처럼 직접 수정하면 안됩니다.
  const [count, setCount] = useState(0);

  // 3. 이벤트 핸들러: 버튼이 클릭될 때 호출될 함수
  const handleIncrement = () => {
    // setCount 함수를 호출하여 count 상태를 1 증가시킵니다.
    // React는 이 상태 변경을 감지하고 UI를 자동으로 다시 그립니다.
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  // 4. 렌더링할 UI (JSX)
  // 컴포넌트는 화면에 보여질 JSX 코드를 반환(return)합니다.
  return (
    <div>
      <h2>React 카운터 예제</h2>
      
      {/* {count} 처럼 중괄호를 사용해 자바스크립트 변수를 JSX 안에 넣을 수 있습니다. */}
      <p>현재 카운트: <strong>{count}</strong></p>
      
      {/* 버튼 클릭 시(onClick) 준비된 함수를 연결합니다. */}
      <button onClick={handleIncrement}>
        증가하기 (+)
      </button>
      <button onClick={handleDecrement}>
        감소하기 (-)
      </button>
    </div>
  );
}

// 5. 다른 파일에서 이 Counter 컴포넌트를 사용할 수 있도록 내보냅니다.
export default Counter;

 

React가 setCount 호출을 감지하면 Counter 컴포넌트를 다시 실행하고, 변경된 count 값을 화면에 자동으로 업데이트 해줍니다.