React는 Facebook이 개발한 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. 리액트를 이용하여 효율적이고 재사용 가능한 UI 컴포넌트를 만들 수 있습니다. 본 강좌에서는 To Do 앱을 예제로 사용하여 리액트를 이용한 프로젝트 준비하는 방법을 배우게 됩니다. 이 강좌를 통해 리액트의 기본 개념과 프로젝트를 준비하는 과정에 대해 자세히 알아보도록 하겠습니다.

1. 프로젝트 개요

To Do 앱은 사용자가 할 일을 추가하고 삭제할 수 있는 간단한 애플리케이션입니다. 본 앱을 통해 다음과 같은 기능을 구현하게 됩니다:

• 할 일 추가 기능
• 할 일 삭제 기능
• 할 일 완료 표시 기능
• 할 일 필터링 기능 (모두, 진행중, 완료)

이 프로젝트는 리액트를 처음 접하는 개발자들에게 좋은 연습이 될 것입니다. 단계별로 진행하면서 다양한 리액트 개념을 익힐 수 있습니다.

2. 개발 환경 설정

To Do 앱을 개발하기 위해서는 먼저 개발 환경을 설정해야 합니다. 아래의 단계에 따라 진행해 주세요.

2.1 Node.js 설치

React는 Node.js 환경에서 실행됩니다. Node.js가 설치되어 있지 않다면, 다음 링크에서 다운로드하여 설치합니다: Node.js 공식 사이트. 설치가 완료된 후, 아래의 명령어로 Node.js가 잘 설치되었는지 확인합니다.

node -v

npm -v

2.2 Create React App 사용

React 프로젝트를 빠르게 설정하기 위해 Create React App을 사용합니다. 아래의 명령어로 새로운 프로젝트를 생성합니다.

npx create-react-app todo-app

위 명령어는 `todo-app`이라는 이름의 새로운 리액트 프로젝트를 생성합니다. 생성이 완료된 후 해당 디렉토리로 이동합니다.

cd todo-app

2.3 프로젝트 구조 이해하기

생성된 리액트 프로젝트에는 기본적으로 여러 폴더와 파일이 생성됩니다. 주요 폴더 구조는 다음과 같습니다:

• node_modules: 프로젝트의 의존성이 저장되는 폴더입니다.
• public: 정적 파일이 저장되는 폴더입니다.
• src: 리액트 컴포넌트와 앱의 주요 로직이 들어가는 폴더입니다.
• package.json: 프로젝트의 메타 정보를 담고 있는 파일입니다.

3. To Do 앱 구현하기

이제 본격적으로 To Do 앱을 구현해보겠습니다. 다음 단계들을 따라가며 코드를 작성해보세요.

3.1 App 컴포넌트 만들기

`src` 폴더 안에 `App.js` 파일을 열어서 아래와 같이 수정합니다.

import React, { useState } from 'react';
import './App.css';

function App() {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
        if (inputValue.trim()) {
            setTodos([...todos, { text: inputValue, completed: false }]);
            setInputValue('');
        }
    };

    return (
        

            
To Do List
             setInputValue(e.target.value)} 
                placeholder="할 일을 입력하세요"
            />
            추가
            

                {todos.map((todo, index) => (
                    
{todo.text}
                ))}
            
        
    );
}

export default App;

3.2 할 일 삭제 기능 추가하기

이제 각 할 일을 삭제할 수 있는 기능을 추가해보겠습니다. `addTodo` 함수 아래에 아래의 함수를 추가합니다.

const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
};

그리고 `

{todos.map((todo, index) => (
    

        {todo.text}
         removeTodo(index)}>삭제
    
))}

3.3 완료 표시 기능 추가하기

사용자가 할 일을 완료 상태로 변경할 수 있는 기능도 추가해보겠습니다. 먼저, 할 일 항목의 상태를 업데이트하는 함수를 추가합니다.

const toggleComplete = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
};

그 다음, `

 toggleComplete(index)}>
    {todo.text}
     removeTodo(index)}>삭제

3.4 필터링 기능 추가하기

마지막으로 할 일을 필터링할 수 있는 기능을 추가하겠습니다. 필터 상태를 관리하기 위해 상태 변수를 추가합니다.

const [filter, setFilter] = useState('all');

아래의 조건문을 사용하여 할 일 목록을 필터링합니다.

const filteredTodos = todos.filter(todo => {
    if (filter === 'completed') return todo.completed;
    if (filter === 'active') return !todo.completed;
    return true;
});

마지막으로 필터 버튼을 추가하여 사용자가 선택할 수 있게 합니다.

 setFilter('all')}>모두
 setFilter('active')}>진행중
 setFilter('completed')}>완료

    {filteredTodos.map((todo, index) => (
        
 toggleComplete(index)}>
            {todo.text}
             removeTodo(index)}>삭제
        
    ))}

4. 마무리 및 배포

To Do 앱의 모든 기능을 구현하였습니다. 마지막으로 앱을 테스트한 후, 배포를 진행할 차례입니다.

4.1 앱 테스트하기

로컬에서 앱을 실행하여 기능이 잘 작동하는지 확인합니다. 아래의 명령어로 로컬 서버를 시작합니다.

npm start

4.2 배포하기

앱이 잘 작동하면, 이제 배포할 차례입니다. 여러 배포 옵션이 있지만, Create React App이 제공하는 `build` 명령어를 사용하여 최적화된 코드를 생성할 수 있습니다.

npm run build

생성된 `build` 폴더를 서버에 업로드하거나, Netlify, Vercel과 같은 플랫폼을 사용하여 배포할 수 있습니다.

5. 결론

이제 리액트를 사용하여 간단한 To Do 앱을 만들어 보았습니다. 이 과정을 통해 리액트의 핵심 개념과 앱 개발의 기본 프로세스를 이해할 수 있었습니다. 앞으로 더욱 복잡한 애플리케이션을 개발할 수 있는 기반이 되었기를 바랍니다.

추가적으로 이 프로젝트에 기능을 더하거나 디자인을 수정하여 더 발전된 버전을 만들어보는 것도 좋은 연습이 될 것입니다. 리액트를 응용하여 다른 프로젝트도 시도해 보세요!