React (리액트)

 

 

🔶 React 🔶

사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리.

Meta(구 Facebook)에서 개발했으며, 컴포넌트(Component) 기반으로 UI를 효율적으로 구성하고 관리할 수 있도록 설계되었다.

 

◼️ 주요 특징

• 높은 성능: Virtual DOM을 활용하여 변경된 부분만 효율적으로 렌더링하므로 빠른 사용자 경험(UX)을 제공한다.
  • 불필요한 화면 갱신을 줄여 애플리케이션의 성능을 향상시킨다.
• 재사용성: 컴포넌트(Component) 기반 구조를 사용하여 동일한 UI 요소를 여러 곳에서 재사용할 수 있다.
  • 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있다.
• 커뮤니티 지원: 전 세계적으로 많은 개발자가 사용하고 있어 다양한 오픈소스 라이브러리와 참고 자료를 쉽게 찾을 수 있다.
  • 문제 해결에 필요한 정보와 지원을 빠르게 얻을 수 있다.
• 모바일 앱 개발 지원:  React Native를 사용하면 React의 컴포넌트와 상태 관리 방식을 활용하여 Android와 iOS 네이티브 애플리케이션을 개발할 수 있다.
  • 웹과 모바일 간의 코드 재사용이 가능하여 개발 효율을 높일 수 있다.

 

👉 React는 컴포넌트 기반 구조와 Virtual DOM을 통해 효율적인 UI 개발을 지원한다. 특히 단일 페이지 애플리케이션(SPA) 개발에 널리 사용되며, 높은 재사용성과 풍부한 생태계 덕분에 대규모 애플리케이션 개발에도 적합하다.

 

---

 

◼️ 필수 매뉴얼 모음

🔹 Component (컴포넌트)

React의 화면(UI)을 만드는 재사용 가능한 독립적인 단위.

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

• 하나의 기능이나 화면을 하나의 컴포넌트로 작성한다.
• 현대 React에서는 함수형 컴포넌트(Function Component)를 주로 사용한다.

 

🔹 JSX (JavaScript XML)

JavaScript 안에서 HTML처럼 UI를 작성할 수 있는 문법.

const element = <h1>Hello, JSX!</h1>;

• HTML처럼 보이지만 실제 HTML은 아니다.
• JSX는 JavaScript 문법 확장(Syntax Extension)이며, 빌드 과정에서 JavaScript 코드로 변환된다.
• UI 구조를 직관적으로 표현할 수 있다.

 

🔹 Props (Properties)

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법.

// 부모 컴포넌트
<Greeting name="World" />

// 자식 컴포넌트
function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

• 부모 → 자식 방향으로만 전달된다. (단방향 데이터 흐름)
• Props는 읽기 전용(Read-only)이므로 자식 컴포넌트에서 직접 변경할 수 없다.

 

🔹 useState

컴포넌트의 상태(State)를 저장하고 변경하기 위한 Hook.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // count → 현재 값, setCount() → 값을 변경하는 함수, 0 → 초기값

  return (
    <>
      <p>{count}</p>

      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </>
  );
}

• 카운터 애플리케이션의 현재 값 또는 목록의 항목 등 동적인 데이터를 관리하는 데 사용된다. 
• State가 변경되면 React가 자동으로 화면을 다시 렌더링(Re-rendering)한다.

 

🔹 useEffect

렌더링 이후 부수 효과(Side Effect)를 처리하는 Hook.

import { useState, useEffect } from "react";

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 처음 마운트(렌더링)된 후 한 번만 실행됩니다.
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result));
  }, []); // 의존성 배열이 비어있으면 최초 1회만 실행, 값이 있으면 그 값이 변할 때마다 재실행

  return (
    <div>
      {data ? <p>데이터: {data.message}</p> : <p>데이터를 불러오는 중입니다...</p>}
    </div>
  );
}

• API 요청, 데이터 불러오기, 이벤트 등록, 타이머 실행, DOM 조작 등을 처리하는 데 효과적이다. 

 

🔹 Conditional Rendering (조건부 렌더링)

특정 조건에 따라 다른 화면을 보여주는 방법.

function UserStatus({ isLoggedIn }) {
  return (
    <>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인해주세요.</p>}
    </>
  );
}

• 주로 사용하는 방법
  • 삼항 연산자: 조건 ? 참일 때 : 거짓일 때
  • if문: if (isLoggedIn) { return <Home />; } return <Login />;
  • && 연산자: {isLoggedIn && <Home />} (조건이 참일 때만 우항을 렌더링)

 

🔹 map()

배열의 데이터를 반복해서 화면에 출력할 때 사용.

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

• 각 요소마다 고유한 key가 반드시 필요하다. (React가 변경된 요소를 빠르게 감지하기 위함)
• key는 가능한 한 데이터의 고유 ID를 사용하는 것이 좋으며, 배열의 index는 순서가 변하지 않는 경우에만 사용하는 것이 권장된다.

 

🔹 Event Handling (이벤트 처리)

사용자의 동작에 반응하는 기능을 구현.

function ButtonClicker() {
  const handleClick = () => {
    alert("버튼이 클릭되었습니다.");
  };

  return (
    <button onClick={handleClick}>
      클릭
    </button>
  );
}

• 대표적인 이벤트
  • onClick
  • onChange
  • onSubmit
  • onKeyDown
• HTML의 이벤트 처리와 유사하나, React에서는 이벤트 핸들러 함수를 JSX 요소에 직접 전달하며, 이벤트 이름은 카멜케이스(camelCase)를 사용한다.

 

 

📋 핵심 요약표 📋

개념	역할	한 줄 요약
Component	화면 구성	UI를 만드는 재사용 가능한 함수
JSX	UI 작성	JavaScript에서 HTML처럼 작성하는 문법
Props	데이터 전달	부모가 자식에게 전달하는 데이터
useState	상태 관리	변하는 데이터를 저장하는 기능
useEffect	부수 효과 처리	렌더링 후 실행할 작업을 처리하는 Hook
Conditional Rendering	조건 분기	조건에 따라 다른 UI를 출력
map()	반복 출력	배열 데이터를 반복해서 화면에 표시
Event Handling	사용자 상호작용	클릭·입력 등 이벤트를 처리하는 기능