리액트 강좌: 일기 데이터를 웹 스토리지에 보관하기

오늘날의 웹 애플리케이션은 사용자의 데이터를 어떻게 효율적으로 관리하고 저장할 것인지에 대한 고민을 안고 있습니다. 이번 강좌에서는 리액트를 이용해 일기 데이터를 웹 스토리지에 저장하는 방법을 살펴보겠습니다. 웹 스토리지는 브라우저에 데이터를 저장할 수 있는 간편하고 효과적인 방법으로, 플래시, 쿠키보다 더 많은 데이터를 저장할 수 있으며, 서버에 요청하지 않고도 데이터를 손쉽게 읽고 쓸 수 있습니다.

1. 웹 스토리지란?

웹 스토리지는 두 가지 주요 유형이 있습니다: 세션 스토리지(Session Storage)와 로컬 스토리지(Local Storage). 이 두 가지는 데이터 저장 방식이 다르지만 동일한 API를 제공합니다.

로컬 스토리지(Local Storage): 데이터를 영구적으로 저장할 수 있습니다. 사용자가 브라우저를 종료하거나 페이지를 새로고침하더라도 데이터는 사라지지 않습니다.
세션 스토리지(Session Storage): 데이터는 브라우저의 세션 동안에만 저장됩니다. 사용자가 탭을 닫거나 브라우저를 종료하면 데이터는 사라집니다.

일기 데이터를 저장하기 위해서는 로컬 스토리지를 사용하는 것이 가장 적합합니다. 사용자가 작성한 일기 내용이 계속 보존되어야 하기 때문입니다.

2. 리액트와 웹 스토리지를 활용한 일기 앱 만들기

이번 섹션에서는 간단한 일기 작성 애플리케이션을 만들어보겠습니다. 애플리케이션은 사용자가 일기를 작성하고, 이를 로컬 스토리지에 저장하며, 저장된 일기를 불러오는 기능을 포함하게 됩니다. 리액트의 `useState`와 `useEffect` 훅을 활용해 상태를 관리하고, 웹 스토리지와 데이터를 동기화할 것입니다.

2.1 프로젝트 설정

npx create-react-app diary-app

위 명령어로 리액트 앱을 생성한 후, 생성된 디렉토리로 이동합니다.

cd diary-app

2.2 필요한 컴포넌트 생성하기

다음은 주요 컴포넌트 구조입니다:

App.js
DiaryForm.js
DiaryList.js

2.3 DiaryForm 컴포넌트

DiaryForm 컴포넌트는 사용자가 일기를 입력할 수 있는 폼을 제공합니다.

import React, { useState, useEffect } from 'react';

const DiaryForm = ({ onSubmit }) => {
    const [diaryText, setDiaryText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(diaryText);
        setDiaryText('');
    }

    return (
        
             setDiaryText(e.target.value)}
                placeholder="일기를 작성하세요..."
                rows="10"
                required
            />
            <button type="submit">저장하기</button>
        
    );
};

export default DiaryForm;

2.4 DiaryList 컴포넌트

DiaryList 컴포넌트는 저장된 일기들을 보여주는 역할을 합니다.

import React from 'react';

const DiaryList = ({ diaries }) => {
    return (
        
            저장된 일기
            
                {diaries.map((diary, index) => (
                    {diary}
                ))}
            
        
    );
};

export default DiaryList;

2.5 App 컴포넌트

App 컴포넌트에서 전체 애플리케이션의 상태를 관리하고, 웹 스토리지와 상호작용합니다.

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

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

    useEffect(() => {
        const savedDiaries = localStorage.getItem('diaries');
        if (savedDiaries) {
            setDiaries(JSON.parse(savedDiaries));
        }
    }, []);

    const addDiary = (diary) => {
        const updatedDiaries = [...diaries, diary];
        setDiaries(updatedDiaries);
        localStorage.setItem('diaries', JSON.stringify(updatedDiaries));
    };

    return (
        
            일기 애플리케이션
            
            
        
    );
};

export default App;

3. 코드 설명

3.1 상태 관리

위 코드에서 `useState`를 통해 일기 데이터(`diaries`)의 상태를 관리합니다. 사용자가 새로운 일기를 입력하면 `addDiary` 함수가 호출되어 상태를 업데이트하고, 이를 로컬 스토리지에 저장합니다.

3.2 웹 스토리지 사용

일기를 로컬 스토리지에 저장하기 위해 `localStorage.setItem`과 `localStorage.getItem` 메소드를 사용합니다. 애플리케이션이 처음 렌더링될 때 `useEffect`를 사용해 저장된 일기를 불러옵니다.

4. 애플리케이션 실행

모든 세팅이 끝났다면, 아래의 명령어로 애플리케이션을 실행할 수 있습니다.

npm start

브라우저에서 http://localhost:3000에 접속하면 일기 애플리케이션을 확인할 수 있습니다.

5. 향후 개선 사항

위의 기본 기능 외에도 다음과 같은 개선 사항을 고려할 수 있습니다:

일기 수정 및 삭제 기능 추가
일기 작성 날짜 및 시간을 표시
다양한 UI 스타일링 적용
일기를 검색하거나 필터링하는 기능 구현

6. 결론

이 강좌에서는 리액트를 사용하여 일기 데이터를 웹 스토리지에 저장하고 관리하는 간단한 애플리케이션을 구축했습니다. 웹 스토리지를 사용하면 사용자의 데이터를 편리하게 저장할 수 있으며, 이를 통해 애플리케이션의 사용자 경험을 개선할 수 있습니다. 이제 여러분도 자신만의 일기 애플리케이션을 만들어보세요!