React 기본 개념

React 기본 개념

1. JSX (JavaScript XML)

JSX는 JavaScript의 확장 문법으로, JavaScript 코드 내에 HTML과 유사한 마크업을 작성할 수 있게 해줍니다.

function Welcome() {
  return <h1>안녕하세요, React!</h1>;
}

JSX 주요 특징:

• JavaScript와 HTML 마크업을 결합
• JSX는 컴파일 시 JavaScript로 변환됨
• 몇 가지 HTML과의 차이점:
  • class 대신 className 사용
  • for 대신 htmlFor 사용
  • 모든 태그는 닫혀야 함 (예: <img />)
  • JavaScript 표현식은 중괄호 {} 안에 작성
  • 케밥 케이스(kebab-case) 대신 카멜 케이스(camelCase) 사용 (예: onclick → onClick)

JSX 예제:

function Greeting() {
  const name = "철수";
  return (
    <div className="greeting">
      <h1>안녕하세요, {name}님!</h1>
      {name.length > 3 ? <p>긴 이름이네요!</p> : <p>짧은 이름이네요!</p>}
    </div>
  );
}

2. 컴포넌트

React 애플리케이션은 컴포넌트로 구성됩니다. 컴포넌트는 함수형 또는 클래스형으로 작성할 수 있습니다.

함수형 컴포넌트 (현대 React에서 권장)

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

클래스형 컴포넌트

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

컴포넌트 사용:

function App() {
  return (
    <div>
      <Greeting name="철수" />
      <Greeting name="영희" />
    </div>
  );
}

컴포넌트 설계 원칙:

• 단일 책임 원칙: 각 컴포넌트는 한 가지 역할만 수행해야 함
• 재사용성: 여러 곳에서 재사용할 수 있도록 설계
• 컴포지션: 작은 컴포넌트를 조합하여 복잡한 UI 구성

3. Props

Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.

// 부모 컴포넌트
function App() {
  return <Greeting name="철수" age={25} isAdmin={true} />;
}

// 자식 컴포넌트
function Greeting(props) {
  return (
    <div>
      <h1>안녕하세요, {props.name}님!</h1>
      <p>나이: {props.age}세</p>
      {props.isAdmin && <p>관리자입니다.</p>}
    </div>
  );
}

Props의 특징:

• 읽기 전용 (자식 컴포넌트 내에서 직접 수정 불가)
• 부모에서 자식으로 단방향 데이터 흐름
• 객체, 배열, 함수 등 모든 JavaScript 값 전달 가능
• 디스트럭처링으로 더 간결하게 작성 가능:

  function Greeting({ name, age, isAdmin }) {  return (    <div>      <h1>안녕하세요, {name}님!</h1>      <p>나이: {age}세</p>      {isAdmin && <p>관리자입니다.</p>}    </div>  );}
  

4. State

State는 컴포넌트 내부에서 관리되는 데이터로, 변경 가능합니다. 함수형 컴포넌트에서는 React Hook인 useState를 사용합니다.

import React, { useState } from 'react';

function Counter() {
  // [현재 상태, 상태를 업데이트하는 함수]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
      <button onClick={() => setCount(count - 1)}>
        감소
      </button>
    </div>
  );
}

State의 특징:

• 컴포넌트가 렌더링 사이에 데이터를 "기억"하게 함
• 상태 변경 시 컴포넌트가 다시 렌더링됨
• 상태 업데이트는 비동기적으로 처리됨
• 직접 상태 변수를 수정하지 않고, 항상 setter 함수 사용 (setCount)
• 이전 상태를 기반으로 업데이트할 때 함수형 업데이트 사용:

  // 잘못된 방법 (연속적인 업데이트에서 문제 발생 가능)setCount(count + 1);setCount(count + 1);// 올바른 방법 (함수형 업데이트)setCount(prevCount => prevCount + 1);setCount(prevCount => prevCount + 1);
  

5. 이벤트 처리

React에서 이벤트는 camelCase로 작성하며, 함수를 이벤트 핸들러로 전달합니다.

function Button() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

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

이벤트 처리 특징:

• 합성 이벤트(SyntheticEvent): React는 브라우저의 네이티브 이벤트를 감싸는 자체 이벤트 시스템 사용
• 인라인 함수 또는 별도 메서드로 핸들러 정의 가능
• 매개변수 전달:

  function ListItem({ item, onItemClick }) {  return (    <li onClick={() => onItemClick(item.id)}>      {item.name}    </li>  );}