리액트 강좌: 리액트 앱 만들기

리액트(React)는 현재 가장 인기 있는 자바스크립트 라이브러리 중 하나로, 사용자 인터페이스(UI)를 구축하기 위한 효율적이고 유연한 방법을 제공합니다. 이 강좌에서는 리액트를 사용하여 간단한 웹 애플리케이션을 만드는 과정을 단계별로 안내합니다. 여러분이 이 강좌를 완주하면, 리액트의 기본 개념을 이해하고, 실제 애플리케이션을 구축할 수 있는 능력을 갖추게 될 것입니다.

1. 리액트란 무엇인가?

리액트는 페이스북에 의해 개발된 오픈 소스 자바스크립트 라이브러리입니다. 주로 단일 페이지 애플리케이션(SPA)을 만들기 위한 목적으로 사용됩니다. 리액트는 컴포넌트 기반 구조를 제공하여 코드 재사용성을 높이고, 애플리케이션의 유지보수를 용이하게 합니다. 또한, 가상 DOM을 사용하여 성능을 극대화할 수 있습니다.

2. 리액트의 주요 특징

  • 컴포넌트 기반 구조: 리액트는 UI를 독립적인 컴포넌트로 나누어 개발합니다. 각 컴포넌트는 자신만의 상태와 속성을 가질 수 있습니다.
  • 가상 DOM: 리액트는 실제 DOM에 접근하기 전에 변경 사항을 가상 DOM에서 처리합니다. 이를 통해 성능을 크게 향상시킵니다.
  • 단방향 데이터 흐름: 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐릅니다. 이는 데이터의 흐름을 명확하게 하고, 디버깅을 용이하게 합니다.
  • JSX: 리액트는 자바스크립트와 HTML을 혼합할 수 있게 해주는 JSX를 제공합니다. 이는 코드를 더 읽기 쉽게 만들어줍니다.

3. 리액트 설치하기

리액트를 사용하기 위해서는 먼저 개발 환경을 설정해야 합니다. 다음과 같은 과정으로 설치를 진행해보겠습니다.

3.1 Node.js와 npm 설치

리액트는 Node.js 환경에서 실행됩니다. 따라서, 먼저 Node.js와 npm(노드 패키지 매니저)을 설치해야 합니다. Node.js는 공식 웹사이트에서 다운로드할 수 있습니다.

3.2 Create React App으로 새 프로젝트 만들기

이제 리액트 프로젝트를 쉽게 생성할 수 있는 Create React App을 사용해보겠습니다. 아래의 명령어를 터미널에 입력하여 새 프로젝트를 생성하세요:

npx create-react-app my-app

위 명령어를 입력하면 “my-app”이라는 이름의 새로운 리액트 프로젝트 폴더가 생성됩니다. 생성이 완료되면, 다음 명령어를 사용하여 프로젝트 폴더로 이동합니다.

cd my-app

3.3 애플리케이션 실행하기

이제 애플리케이션을 실행해보겠습니다. 아래의 명령어를 입력하세요:

npm start

브라우저가 자동으로 열리고 http://localhost:3000에서 애플리케이션을 확인할 수 있습니다.

4. 리액트 기본 개념

리액트를 이해하기 위해서는 몇 가지 기본 개념을 숙지해야 합니다.

4.1 컴포넌트

컴포넌트는 리액트 애플리케이션의 기본 빌딩 블록입니다. 각각의 컴포넌트는 HTML, CSS, 그리고 자바스크립트를 포함할 수 있습니다. 다음은 기본적인 함수형 컴포넌트의 예입니다:

function Welcome() {
    return <h1>Hello, World!</h1>;
}

4.2 상태 관리

리액트에서 상태(state)는 컴포넌트의 데이터를 관리하는 방법입니다. 상태가 변경될 때마다 리액트는 해당 컴포넌트를 다시 렌더링합니다.

상태를 정의하고 업데이트하는 방법은 다음과 같습니다:

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

4.3 Props

Props는 컴포넌트 간 데이터 전달을 위한 방법입니다. 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 수 있습니다.

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

function App() {
    return <Greeting name="Alice" />;
}

5. 리액트 앱 만들기

이제 본격적으로 리액트 앱을 만들어 보겠습니다. 이번 프로젝트는 간단한 할 일 목록(To-Do List) 애플리케이션을 만드는 것입니다.

5.1 프로젝트 구조

먼저, 필요한 컴포넌트를 정의해봅시다. 우리의 프로젝트는 다음과 같은 구조를 가집니다:

  • src/
    • components/
      • Todo.js
      • TodoList.js
    • App.js
    • index.js

5.2 Todo 컴포넌트 생성하기

Todo.js 파일을 생성하고, 각 할 일을 표시하는 컴포넌트를 정의합니다.

import React from 'react';

function Todo({ todo, onToggle }) {
    return (
        <div onClick={onToggle}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                {todo.text}
            </span>
        </div>
    );
}

export default Todo;

5.3 TodoList 컴포넌트 생성하기

TodoList.js 파일을 생성하고, 여러 Todo 컴포넌트를 표시하는 리스트를 만들겠습니다.

import React from 'react';
import Todo from './Todo';

function TodoList({ todos, onToggle }) {
    return (
        <div>
            {todos.map(todo => (
                <Todo key={todo.id} todo={todo} onToggle={() => onToggle(todo.id)} />
            ))}
        </div>
    );
}

export default TodoList;

5.4 App 컴포넌트 업데이트하기

App.js 파일에 상태를 관리하고, TodoList를 렌더링하는 로직을 추가합시다.

import React, { useState } from 'react';
import TodoList from './components/TodoList';

function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: '리액트 배우기', completed: false },
        { id: 2, text: '프론트엔드 개발 연습하기', completed: false },
    ]);

    const toggleTodo = (id) => {
        const updatedTodos = todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        );
        setTodos(updatedTodos);
    };

    return <TodoList todos={todos} onToggle={toggleTodo} />;
}

export default App;

5.5 최종적으로 앱 실행하기

위의 코드를 작성한 후, 애플리케이션을 다시 실행하면 할 일 목록이 표시되며, 각 항목을 클릭하여 완료 상태를 토글할 수 있습니다.

6. 리액트 앱 최적화

애플리케이션을 최적화하는 것은 사용자 경험을 향상시키고 성능을 높이는 중요한 작업입니다. 다음은 리액트 앱을 최적화하기 위한 몇 가지 방법입니다:

  • React.memo: 불필요한 리렌더링을 방지하기 위해 컴포넌트를 메모이제이션(memoization)할 수 있습니다.
  • useCallback: 함수를 메모이제이션하여 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지합니다.
  • useMemo: 계산 비용이 높은 메모리를 메모이제이션하여 성능을 최적화합니다.

7. 리액트 라우터 사용하기

리액트 애플리케이션에서 여러 페이지를 구현하기 위해서는 리액트 라우터를 사용할 수 있습니다. 리액트 라우터를 설치하고 기본적인 라우팅을 설정하는 방법은 다음과 같습니다:

npm install react-router-dom

7.1 기본 라우팅 설정하기

App.js 파일 수정하여 라우팅을 설정합니다.

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

// 다른 컴포넌트 임포트
import Home from './components/Home';
import About from './components/About';

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

8. 결론

이번 강좌에서는 리액트를 사용하여 간단한 할 일 목록 애플리케이션을 만드는 방법을 배웠습니다. 리액트의 기본 개념, 컴포넌트 생성, 상태 관리 및 라우팅을 설정하는 과정을 통해 리액트의 매력을 느껴보았을 것입니다. 리액트는 강력하고 유연한 라이브러리이므로, 다양한 프로젝트에 활용 가능성이 limitless합니다. 앞으로 더 많은 프로젝트를 통해 여러분의 리액트 실력을 키워나가길 바랍니다.

부록: 추가 자료

해당 강좌에서 언급한 개념들에 대해 더 깊이 공부할 수 있는 자료를 제공하겠습니다:

감사합니다. 여러분의 리액트 학습이 즐겁고 유익하길 바랍니다!