React.js 기초부터 활용까지 – 시작 가이드

1. React.js 개요

React.js는 Facebook(현 Meta)이 개발한 오픈 소스 자바스크립트 라이브러리로, UI를 구축하는 데 사용된다. 특히 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성을 극대화할 수 있으며, 가상 DOM(Virtual DOM)을 활용하여 뛰어난 성능을 제공한다. React는 단순한 웹 페이지뿐만 아니라 대규모 애플리케이션에서도 널리 사용되며, 현대적인 프론트엔드 개발에서 필수적인 기술 중 하나로 자리 잡았다.

React의 핵심 철학은 "한 방향 데이터 흐름(One-way data flow)"과 "선언적 프로그래밍(Declarative Programming)"이다. 이 개념은 개발자가 UI의 상태를 보다 직관적으로 관리할 수 있도록 도와주며, 복잡한 상태 변경 로직을 간결하게 처리할 수 있도록 한다. 또한, React는 JSX(JavaScript XML) 문법을 사용하여 HTML과 JavaScript를 자연스럽게 결합할 수 있도록 지원한다. 이를 통해 개발자는 보다 가독성이 뛰어난 코드를 작성할 수 있다.

React는 단순한 라이브러리를 넘어, 강력한 생태계를 형성하고 있다. React Router를 이용한 라우팅, Redux 및 Context API를 활용한 상태 관리, 그리고 Next.js를 통한 서버 사이드 렌더링(SSR) 등 다양한 확장 기능을 지원한다. 이러한 특징 덕분에 React는 현대적인 프론트엔드 개발에서 가장 널리 사용되는 라이브러리 중 하나로 자리 잡고 있다. 이번 가이드에서는 React의 기본 개념부터 실제 활용 방법까지 자세히 살펴보도록 하겠다.

 

 

2. React의 주요 개념

1) 컴포넌트(Component)

React의 핵심 개념 중 하나는 "컴포넌트"이다. 컴포넌트는 UI를 구성하는 독립적인 단위로, 재사용성과 유지보수성을 높이는 역할을 한다. React에서는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 형태로 컴포넌트를 정의할 수 있다.

// 함수형 컴포넌트 예제
function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

// 클래스형 컴포넌트 예제
class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

최근에는 React Hooks의 등장으로 함수형 컴포넌트가 더욱 선호되고 있으며, 클래스형 컴포넌트는 점차 사용 빈도가 줄어들고 있다. 함수형 컴포넌트는 코드가 간결하고, 상태(state)와 생명 주기(lifecycle)를 보다 쉽게 관리할 수 있는 장점이 있다.

2) JSX(JavaScript XML)

JSX는 React에서 UI를 정의할 때 사용하는 문법으로, JavaScript와 XML을 결합한 형태이다. JSX를 사용하면 HTML 요소를 JavaScript 코드 내에서 직관적으로 표현할 수 있으며, 동적인 UI를 보다 쉽게 구성할 수 있다.

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

JSX는 실제로는 JavaScript 코드로 변환되어 실행되므로, 자바스크립트의 모든 기능을 활용할 수 있다. 또한, JSX를 사용하면 DOM 요소를 보다 명확하게 표현할 수 있어 코드의 가독성을 높일 수 있다.

3) 상태(State)와 속성(Props)

React에서 UI는 "상태(state)"와 "속성(props)"을 기반으로 렌더링된다. 상태는 컴포넌트 내부에서 관리되는 데이터이며, 속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다.

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

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

위 코드에서 useState를 사용하여 상태를 관리하고 있으며, setCount 함수를 호출하면 상태가 변경되고 UI가 자동으로 업데이트된다. React의 상태 관리는 UI 업데이트를 보다 효율적으로 처리할 수 있도록 도와준다.

3. React의 활용 방법

1) React 프로젝트 생성

React 애플리케이션을 생성하는 가장 간단한 방법은 create-react-app 명령어를 사용하는 것이다.

npx create-react-app my-app
cd my-app
npm start

이 명령어를 실행하면 기본적인 React 프로젝트가 생성되며, npm start를 실행하면 로컬 개발 서버에서 애플리케이션을 실행할 수 있다.

2) 이벤트 처리

React에서는 이벤트를 처리할 때 일반 HTML 이벤트와 유사한 문법을 사용하지만, CamelCase 스타일을 적용해야 한다.

function ClickButton() {
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }
  return <button onClick={handleClick}>클릭</button>;
}

3) React Router를 이용한 라우팅

React 애플리케이션에서는 react-router-dom을 사용하여 페이지 간 이동(라우팅)을 구현할 수 있다.

npm install react-router-dom

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

function Home() {
  return <h2>홈 페이지</h2>;
}

function About() {
  return <h2>소개 페이지</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

4. 결론

React는 현대적인 웹 애플리케이션을 개발하는 데 필수적인 라이브러리로, 컴포넌트 기반 아키텍처와 가상 DOM을 활용하여 효율적인 UI를 구축할 수 있다. JSX 문법을 통해 가독성이 높은 코드를 작성할 수 있으며, 상태 및 속성 관리를 통해 동적인 UI를 쉽게 구현할 수 있다.

또한, React Router를 이용한 라우팅, Hooks를 활용한 상태 관리, 그리고 다양한 외부 라이브러리와의 연계를 통해 확장성이 뛰어난 애플리케이션을 만들 수 있다. React는 계속해서 발전하고 있으며, 이를 학습하고 활용하는 것은 프론트엔드 개발자로서 중요한 역량이 될 것이다. 앞으로 React의 최신 기능과 실전 활용법을 익혀 나가면서, 더욱 효율적인 웹 애플리케이션을 개발할 수 있도록 하자.