React로 간단한 투두 리스트 만들기 예제

 

 

React로 간단한 투두 리스트 만들기

요즘은 많은 사람들이 React를 통해 웹 애플리케이션을 개발하고 있습니다. React는 사용자 인터페이스를 구축하기 위한 유연하고 효율적인 자바스크립트 라이브러리로, 특히 컴포넌트 기반 개발 방식이 매우 매력적입니다. 이번 포스트에서는 React의 특성을 활용하여 간단한 투두 리스트 애플리케이션을 만들어보겠습니다.

React 개발 환경 설정하기

프로젝트를 시작하기 전에, 개발 환경을 설정하는 것이 필요합니다. 아래의 단계에 따라 손쉽게 시작할 수 있습니다.

• Node.js 설치: React는 Node.js 환경에서 실행되므로 먼저 Node.js를 설치해야 합니다. 공식 웹사이트에서 LTS 버전을 다운로드하여 설치하세요.
• 바로 시작하기: 터미널을 열고 아래의 명령어를 입력하여 새로운 React 프로젝트를 생성합니다.
• npx create-react-app my-todo-app
• 디렉토리 이동: 생성한 프로젝트 폴더로 이동합니다.
• cd my-todo-app
• 애플리케이션 실행: 아래의 명령어로 개발 서버를 실행합니다.
• npm start

이제 초기 React 애플리케이션이 브라우저에서 나타날 것입니다.

투두 리스트 컴포넌트 만들기

이제 애플리케이션의 핵심 부분인 투두 리스트 컴포넌트를 만들어보겠습니다. 컴포넌트는 React의 핵심 단위로, 상태와 행동을 캡슐화한 독립적인 블록입니다. 아래는 투두 리스트의 기본 구조를 정의하는 코드입니다:

import React, { useState } from 'react';

function TodoApp() {

const [todos, setTodos] = useState([]);

const [inputValue, setInputValue] = useState('');

const addTodo = () => {

if (inputValue.trim() !== '') {

setTodos([...todos, inputValue]);

setInputValue('');

}

};

const removeTodo = (index) => {

const newTodos = todos.filter((_, i) => i !== index);

setTodos(newTodos);

};

return (

 

투두 리스트

type="text"

value={inputValue}

onChange={(e) => setInputValue(e.target.value)}

placeholder="할 일 입력"

/>

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

 

•  

 

{todo}

))}

 

);

}

export default TodoApp;

 

위의 코드는 다음과 같은 기능을 제공합니다:

 

• 할 일을 입력할 수 있는 텍스트 박스
• 입력된 할 일을 목록에 추가하는 기능
• 목록에서 할 일을 삭제하는 기능

상태 관리의 중요성

React에서는 상태(state) 관리가 매우 중요합니다. 상태는 컴포넌트의 데이터이며, 사용자가 상호작용할 때 변할 수 있는 값들입니다. 상태가 변경되면 해당 컴포넌트는 리렌더링되고, 사용자에게 변경된 내용을 즉시 보여줍니다.

위의 코드에서 useState 훅을 사용하여 투두 항목 목록과 입력 값을 상태로 관리합니다. addTodo 함수는 입력된 값을 리스트에 추가하고, removeTodo 함수는 특정 인덱스의 항목을 삭제합니다.

코드 실행하기

이제 컴포넌트를 완성했으니 전체 애플리케이션에서 이 컴포넌트를 사용할 수 있도록 설정하겠습니다. src/App.js 파일을 열고 다음과 같이 작성합니다:

import React from 'react';

import TodoApp from './TodoApp';

function App() {

return (

 

 

 

);

}

export default App;

 

이제 애플리케이션을 실행하면, 투두 리스트 애플리케이션이 정상적으로 동작하는 모습을 확인할 수 있습니다.

결론

이번 포스트에서는 React를 활용하여 간단한 투두 리스트 애플리케이션을 만들어보았습니다. React는 컴포넌트 기반 개발을 지원하며, 상태 관리와 UI 업데이트가 매우 세련되게 이루어집니다. 투두 리스트 프로젝트를 통해 리액트의 기본적인 사용 방법과 상태 관리의 필요성을 이해하셨기를 바랍니다.

앞으로 더 다양한 프로젝트를 통해 React의 기능을 탐구하고, 복잡한 애플리케이션을 만드는 데 도전해보시길 바랍니다. React의 재미를 느끼고, 실력을 키워 나가길 응원합니다!

 

귀 건강 위한 실내 습도·소음·청소 관리법

 

자주 묻는 질문과 답변

React란 무엇인가요?

React는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 컴포넌트 기반의 개발 방식을 채택하여 효율적인 웹 애플리케이션 구축을 지원합니다.

React 프로젝트를 시작하려면 어떻게 하나요?

React 프로젝트를 시작하려면 Node.js를 설치한 후, 터미널에서 'npx create-react-app 프로젝트명' 명령어를 입력하면 간편하게 새 프로젝트를 생성할 수 있습니다.

투두 리스트 애플리케이션은 어떻게 만들 수 있나요?

투두 리스트 애플리케이션은 React 컴포넌트를 활용해 상태 관리를 하며, 사용자의 입력을 받아 목록에 추가하고 삭제하는 기능을 구현하여 쉽게 만들 수 있습니다.

상태 관리란 무엇인가요?

상태 관리는 애플리케이션 내에서 데이터의 변화를 관리하는 것으로, React에서는 컴포넌트의 상태를 통해 사용자와의 상호작용에 따라 UI를 동적으로 업데이트할 수 있게 합니다.