리액트 (React)

🧠 리액트의 핵심 개념

• 컴포넌트 기반 UI를 작은 단위인 컴포넌트로 나눠서 개발합니다. 각 컴포넌트는 독립적으로 동작하고 재사용이 가능해요.

• 선언형 프로그래밍 "어떻게"가 아니라 "무엇을" 보여줄지를 선언합니다. 상태(state)가 바뀌면 자동으로 UI가 갱신돼요.

• Virtual DOM 실제 DOM 대신 가상의 DOM에서 변경 사항을 계산하고, 효율적으로 실제 DOM에 반영합니다.

🛠️ 리액트로 할 수 있는 것들

✨ 간단한 예제

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

<Welcome name="화낼거양" />

리액트가 등장한 이유

🚨 기존 웹 개발의 문제점

• 전체 페이지 새로고침 방식 사용자 인터랙션이 있을 때마다 HTML, CSS, JS를 서버에서 다시 받아야 했어요. 느리고 비효율적이었죠.

• 복잡한 상태 관리 UI가 사용자 행동에 따라 바뀌어야 하는데, 이를 직접 DOM으로 조작하려면 코드가 복잡해지고 오류도 많았어요.

• 중복된 UI 코드 비슷한 UI를 여러 번 작성해야 했고, 재사용이 어려웠어요.

💡 리액트의 등장 이유

• SPA(Single Page Application)의 필요 한 번만 리소스를 로드하고, 이후에는 필요한 부분만 동적으로 바꾸는 방식이 필요했어요.

• 컴포넌트 기반 개발 UI를 작은 단위로 나누고 재사용할 수 있게 하여 유지보수를 쉽게 만들었어요.

• Virtual DOM 도입 실제 DOM을 직접 조작하지 않고, 가상의 DOM에서 변경 사항을 계산해 효율적으로 반영함으로써 성능을 개선했어요.

• 선언형 프로그래밍 “어떻게”가 아니라 “무엇”을 보여줄지를 선언함으로써 코드의 예측 가능성과 디버깅 편의성을 높였어요.

⚛️ 리액트만의 특징

리액트에서 자주 사용되는 기본 문법

⚛️ JSX (JavaScript XML)

• HTML과 유사한 문법을 자바스크립트 안에서 사용

• 중괄호 {}를 사용해 자바스크립트 표현식 삽입 가능

• 여러 요소는 반드시 하나의 부모 요소로 감싸야 함 (<div> 또는 <>...</> 사용)

const element = <h1>안녕하세요, 리액트!</h1>;

🧱 컴포넌트(Component)

• UI를 구성하는 독립적인 블록

• 함수형 컴포넌트가 일반적

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

📦 Props (속성)

• 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터

• 읽기 전용

<Welcome name="화낼거양" />

🔄 State (상태)

• 컴포넌트 내부에서 관리되는 동적인 데이터

• useState 훅으로 사용

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

🪝 Hooks

• 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 함수들

🎯 이벤트 처리

• JSX에서 이벤트는 소문자 대신 카멜케이스로 작성

• 함수 참조를 전달해야 함

<button onClick={handleClick}>클릭</button>

🧩 조건부 렌더링

{isLoggedIn ? <Logout /> : <Login />}

🧹 리스트 렌더링

const items = ['사과', '바나나', '포도'];
const list = items.map((item, index) => <li key={index}>{item}</li>);