React 기초

개요

React는 페이스북(현 Meta)에서 개발되었으며, 웹 애플리케이션의 뷰(View) 레이어를 담당합니다. 가상 DOM(Virtual DOM)을 사용하여 실제 DOM 조작을 최소화함으로써 빠른 성능을 제공하며, 단방향 데이터 흐름을 통해 상태 관리를 용이하게 합니다.

JSX 문법

JSX(JavaScript XML)는 JavaScript의 확장 문법으로, HTML과 유사한 마크업을 JavaScript 코드 내부에 작성할 수 있게 해줍니다. JSX는 Babel을 통해 일반 JavaScript 코드로 변환됩니다.

const name = 'React';
const element = <h1>Hello, {name}</h1>;

• JSX 태그는 반드시 닫아야 합니다. (<br> -> <br />)
• JavaScript 변수를 HTML에 삽입할 때는 중괄호({ })를 사용합니다.
• 클래스를 지정할 때는 class 대신 className 속성을 사용해야 합니다.

컴포넌트

컴포넌트는 React 애플리케이션을 구성하는 기본 단위입니다. UI의 일부를 담당하며, 재사용 가능한 형태로 만들어집니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있지만, 최신 React에서는 함수형 컴포넌트와 Hooks를 사용하는 것을 권장합니다.

import React from 'react';

// 함수형 컴포넌트
function Welcome() {
  return <h1>안녕하세요!</h1>;
}

// 컴포넌트 사용
const App = <Welcome />;

상태(State)와 속성(Props)

사용 예제

버튼 클릭 시 카운트가 증가하는 간단한 컴포넌트 예제입니다. (Hook 사용)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

주의사항 및 팁

• React 애플리케이션은 create-react-app과 같은 도구를 사용하여 쉽게 시작할 수 있습니다.
• 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.
• Props는 읽기 전용(Read-only)입니다. 부모 컴포넌트에서 전달받은 데이터를 직접 수정할 수 없습니다.