리액트 강좌: 일기장 앱 예제

이번 강좌에서는 리액트를 사용하여 일기장 앱을 개발하는 방법에 대해 자세히 알아보겠습니다.

리액트란?

리액트(React)는 사용자 인터페이스(UI)를 구축하기 위해 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리입니다. 리액트는 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 구성을 가능하게 합니다. 리액트는 주로 단일 페이지 애플리케이션(SPA)에서 사용되며, 상태 관리 및 데이터 흐름을 효율적으로 처리할 수 있도록 돕습니다.

일기장 앱 개요

일기장 앱은 사용자가 자신의 일기를 기록하고 관리할 수 있는 간단한 애플리케이션입니다. 이 앱에서는 사용자가 새로운 일기를 추가하고, 기존 일기를 수정하거나 삭제할 수 있는 기능을 제공합니다. 또한, 사용자는 일기를 날짜별로 검색하거나 정렬할 수 있습니다.

프로젝트 설정

리액트 앱을 시작하기 위해 Node.js와 npm이 설치되어 있어야 합니다. 아래의 명령어를 통해 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app diary-app

프로젝트 구조

프로젝트 폴더 구조는 다음과 같습니다:

diary-app/
- public/
  - index.html
- src/
  - components/
    - DiaryEntry.js
    - DiaryList.js
    - DiaryForm.js
  - App.js
  - index.js

주요 기능 구현

1. 일기 추가 기능

일기를 추가하는 기능을 구현하기 위해 우리는 DiaryForm 컴포넌트를 사용할 것입니다. 이 컴포넌트는 사용자로부터 일기 내용을 입력받아 상태를 업데이트하고, 이를 상위 컴포넌트로 전달합니다.


import React, { useState } from 'react';

const DiaryForm = ({ addDiary }) => {
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!content) return;
        addDiary(content);
        setContent('');
    };

    return (
        
             setContent(e.target.value)}
                placeholder="일기를 입력하세요."
            />
            <button type="submit">추가</button>
        
    );
};

export default DiaryForm;

2. 일기 목록 표시 기능

사용자가 추가한 일기를 표시하기 위해 DiaryList 컴포넌트를 구현합니다. 이 컴포넌트는 상위 컴포넌트로부터 전달받은 일기 데이터를 맵핑하여 화면에 렌더링합니다.


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

const DiaryList = ({ diaries }) => {
    return (
        
            {diaries.map((diary, index) => (
                
            ))}
        
    );
};

export default DiaryList;

3. 일기 삭제 기능

일기를 삭제하는 기능을 위해 DiaryEntry 컴포넌트를 추가합니다. 이 컴포넌트는 개별 일기를 렌더링하며 삭제 버튼을 제공합니다.


import React from 'react';

const DiaryEntry = ({ diary, deleteDiary }) => {
    return (
        
            {diary}
            
        
    );
};

export default DiaryEntry;

상태 관리

상태 관리를 위해 리액트의 useState 훅을 사용할 것입니다. 데이터가 변경될 때마다 컴포넌트가 최신 상태로 다시 렌더링될 수 있도록 합니다. 아래는 App.js의 간단한 예시입니다.


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

const App = () => {
    const [diaries, setDiaries] = useState([]);

    const addDiary = (content) => {
        setDiaries([...diaries, content]);
    };

    const deleteDiary = (index) => {
        const newDiaries = diaries.filter((_, i) => i !== index);
        setDiaries(newDiaries);
    };

    return (
        
            나의 일기장
            
            
        
    );
};

export default App;

결론

이번 강좌를 통해 리액트를 사용하여 간단한 일기장 앱을 만드는 방법을 배웠습니다. 이 앱은 리액트의 컴포넌트 기반 아키텍처를 활용하여 사용자가 일기를 작성하고 관리하는 데 필요한 기본 기능을 제공합니다. 이 예제를 바탕으로 더 많은 기능을 추가하여 개인의 일기장 앱을 확장할 수 있습니다.

다음 단계

일기장 앱에 다음과 같은 기능을 추가하여 더 발전시킬 수 있습니다:

일기 검색 기능
일기 수정 기능
일기 날짜별 정렬 기능
일기 데이터 저장을 위한 백엔드 구축

리액트를 활용하여 더 다양한 프로젝트에 도전해보세요!