리액트 강좌: To Do 앱 예제 - 할 일 리스트 렌더링하기

작성자: 조광형

작성일: 2024년 11월 26일

서론

최근 몇 년 동안 리액트(React)는 웹 개발 분야에서 가장 인기 있는 라이브러리 중 하나로 자리잡았습니다. 사용자 인터페이스를作成하고 관리하는 데 매우 유용하며, 컴포넌트 기반 아키텍처 덕분에 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이 글에서는 리액트를 사용하여 간단한 할 일(To Do) 리스트 애플리케이션을 만들어봅니다. 본 강좌의 첫 번째 장에서는 리스트를 렌더링하는 방법에 대해 알아보겠습니다.

1. 개발 환경 설정

리액트로 개발을 시작하기 전에, 먼저 개발 환경을 설정해야 합니다. 아래 단계에 따라 진행해보세요.

Node.js 설치:

리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js 공식 사이트에서 최신 버전을 다운로드하여 설치하세요.
Create React App 설치:

Create React App은 리액트 프로젝트를 쉽게 시작할 수 있도록 도와주는 도구입니다. 터미널을 열고 아래 명령어를 입력하여 설치합니다.
```
npx create-react-app todo-app
```
이 명령어를 실행하면 `todo-app`이라는 폴더가 생성되며, 기본적인 리액트 프로젝트가 설정됩니다.
프로젝트 폴더로 이동:

아래 명령어를 입력하여 프로젝트 폴더로 이동합니다.
```
cd todo-app
```
개발 서버 실행:

개발 서버를 실행하여 리액트 애플리케이션을 확인할 수 있습니다. 아래 명령어를 입력하세요.
```
npm start
```
브라우저에서 http://localhost:3000을 열면 기본 리액트 애플리케이션이 나타납니다.

2. 기본 구조 이해하기

리액트의 구성 요소는 컴포넌트입니다. 각각의 컴포넌트는 UI의 일부를 정의하며, 상태(state)와 속성(props)을 가지게 됩니다.

이제 우리는 할 일 리스트를 렌더링할 컴포넌트를 작성할 것입니다.

3. To Do 컴포넌트 만들기

우선 `src` 폴더 안에 `Todo.js`라는 파일을 생성합니다. 이 파일 내에서 할 일 항목을 렌더링할 컴포넌트를 만들어보겠습니다.


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

function Todo({ todo }) {
    return (
        
            {todo.text}
            완료 여부: {todo.completed ? '완료' : '미완료'}
        
    );
}

export default Todo;

위의 코드는 `Todo`라는 컴포넌트를 정의합니다. 이 컴포넌트는 속성으로 `todo`를 받고, 해당 항목의 텍스트와 완료 여부를 렌더링합니다.

4. Todo 리스트 렌더링하기

이제 실제로 할 일 리스트를 렌더링하는 컴포넌트를 만들어보겠습니다. `App.js`파일을 수정하여 할 일 리스트를 보이게 할 것입니다.


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

const todoList = [
    { text: '리액트 기본 배우기', completed: false },
    { text: '리액트 프로젝트 만들기', completed: false },
    { text: '리액트 앱 배포하기', completed: true },
];

function App() {
    return (
        
            할 일 목록
            
                {todoList.map((todo, index) => (
                    
                ))}
            
        
    );
}

export default App;

위 코드에서 `todoList` 배열은 렌더링할 할 일 목록을 저장합니다. `map` 메서드를 사용하여 각 `todo` 항목을 렌더링하고, `Todo` 컴포넌트를 호출하여 해당 항목의 세부 정보를 출력합니다.

5. 스타일링 추가하기

애플리케이션이 조금 더 보기 좋게 만들기 위해 CSS 스타일을 추가합니다. `App.css` 파일을 열고 다음 스타일을 추가합니다.


.todo {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.App {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

위의 스타일을 통해 각 할 일 항목에 패딩과 마진을 추가하여 시각적으로 분리하였고, 중앙정렬 및 폰트 스타일도 설정하였습니다.

6. 결론

본 강좌에서는 리액트를 사용하여 간단한 할 일 리스트 앱을 만들고, 리스트 항목을 렌더링하는 방법에 대해 알아보았습니다. 여러분은 이제 기본적인 리액트 컴포넌트를 이해하고, 이를 통해 데이터를 사용자에게 표시하는 방법을 배웠습니다. 이후 강좌에서는 상태 관리와 추가 기능 구현에 대해 다룰 것입니다.

리액트를 배우는 여정은 계속됩니다. 다음 강좌에서는 할 일을 추가하고 삭제하는 기능을 개발하여 더욱 풍성한 애플리케이션을 만들어보겠습니다.

리액트 강좌: To Do 앱 예제 – 할 일 리스트 렌더링하기

서론