React로 웹 애플리케이션 구축하기: 완벽 가이드

1. React란?

React는 Facebook(현재 Meta)이 개발한 JavaScript 라이브러리로, UI를 효과적으로 구축하는 데 사용됩니다. 컴포넌트 기반 아키텍처를 제공하며, 단방향 데이터 흐름과 가상 DOM을 활용하여 성능을 최적화합니다.

2. React의 주요 특징

2.1. 컴포넌트 기반 구조

React 애플리케이션은 독립적인 컴포넌트로 구성되며, 각 컴포넌트는 재사용이 가능합니다. 이로 인해 유지보수와 확장성이 뛰어납니다.

2.2. 가상 DOM(Virtual DOM)

가상 DOM을 사용하여 변경된 부분만 업데이트하여 성능을 최적화합니다.

2.3. 단방향 데이터 흐름

React는 단방향 데이터 흐름을 제공하여 데이터의 예측 가능성을 높이고, 디버깅을 쉽게 만듭니다.

3. React 개발 환경 설정

3.1. Node.js 및 npm 설치

React를 실행하려면 Node.js와 npm(Node Package Manager)이 필요합니다.

• Node.js 다운로드
• 설치 후 node -v와 npm -v로 버전 확인

3.2. Create React App(CRA)로 프로젝트 생성

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

3.3. 프로젝트 구조 이해

my-app/
├── src/   # 주요 소스 코드
│   ├── components/   # 컴포넌트 폴더
│   ├── App.js   # 메인 컴포넌트
│   ├── index.js   # 진입점
├── public/   # 정적 파일
├── package.json   # 프로젝트 설정

4. JSX와 컴포넌트

4.1. JSX란?

JSX(JavaScript XML)는 JavaScript에서 HTML을 작성할 수 있도록 도와주는 문법입니다.

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

4.2. 함수형 컴포넌트

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

4.3. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

5. 상태(State)와 속성(Props)

5.1. Props (속성)

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

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

5.2. State (상태)

State는 컴포넌트 내부에서 관리되는 데이터입니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

6. 이벤트 핸들링

React에서 이벤트를 처리하는 방법은 다음과 같습니다.

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }
  return <button onClick={handleClick}>Click me</button>;
}

7. React Router를 이용한 페이지 이동

React Router를 사용하면 SPA(Single Page Application)에서 여러 페이지를 구현할 수 있습니다.

npm install react-router-dom

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

8. 상태 관리 라이브러리

8.1. Redux

npm install redux react-redux

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}
const store = createStore(counterReducer);

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

9. API 호출 및 데이터 처리

React에서 fetch 또는 axios를 사용하여 API를 호출할 수 있습니다.

npm install axios

import axios from 'axios';
import { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => setUsers(response.data));
  }, []);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

10. 결론

React를 활용하면 효율적인 웹 애플리케이션을 구축할 수 있습니다. 본 가이드를 따라가면서 컴포넌트 기반 설계, 상태 관리, API 연동 등을 익히고, 실전 프로젝트를 통해 경험을 쌓아보세요!