리액트 강좌: 일기장 앱 예제 – New 페이지 구현하기

저자: 조광형 | 날짜: [날짜]

소개

리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 이번 강좌에서는 리액트를 사용하여 일기장 앱을 만드는 과정을 다룰 것입니다. 우리는 앱의 “New” 페이지를 구현할 것으로, 사용자가 새로운 일기를 작성하고 저장할 수 있는 폼을 구성할 것입니다. 이 강좌에서는 리액트의 기본 개념과 컴포넌트 설계, 상태 관리, 이벤트 처리 등에 대해 자세히 설명합니다.

사전 준비사항

이 강좌를 따라가기 위해서는 다음과 같은 사전 지식이 필요합니다:

  • HTML 및 CSS의 기본 이해
  • 자바스크립트의 기본 문법
  • 리액트의 기본 개념 (컴포넌트, props, state 등)

이 외에도 Node.js와 npm이 설치되어 있어야 하며, create-react-app을 사용하여 프로젝트를 시작하는 방법을 알고 있어야 합니다.

프로젝트 설정하기

먼저, 새로운 리액트 프로젝트를 생성합니다. 터미널을 열고 다음 명령어를 입력하여 create-react-app을 사용해 프로젝트를 생성합니다:

npx create-react-app diary-app

프로젝트가 생성되면 해당 폴더로 이동하여 개발 서버를 실행합니다:

cd diary-app
npm start

이제 기본적인 리액트 앱이 실행될 것입니다. 다음으로 필요한 종속성을 설치할 것입니다. 우리는 React Router를 사용할 것이므로 다음 명령어를 입력하여 설치합니다:

npm install react-router-dom

라우터 설정하기

라우터를 설정하기 위해, src/App.js 파일을 열어서 다음과 같은 코드를 추가합니다:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import NewEntry from './components/NewEntry';

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

위의 코드에서는 두 개의 라우트를 정의했습니다. ‘/’ 경로에서는 Home 컴포넌트를, ‘/new’ 경로에서는 NewEntry 컴포넌트를 렌더링합니다.

NewEntry 컴포넌트 만들기

이제 새로운 일기를 작성할 수 있는 페이지를 구현하기 위해 src/components/NewEntry.js 파일을 생성하고 다음과 같은 코드를 작성합니다:

import React, { useState } from 'react';

function NewEntry() {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // 일기 저장 로직 추가
        console.log('제목:', title);
        console.log('내용:', content);
    };

    return (
        

            
새 일기 작성하기

            

                

                    
                     setTitle(e.target.value)}
                    />
                

                

                    
                    
                

                
            

        

    );
}

export default NewEntry;

위의 코드에서는 제목과 내용을 상태로 관리하고, 폼이 제출되면 콘솔에 로그를 출력합니다. 이제 일기를 저장하는 로직을 추가할 차례입니다.

일기 저장 로직 추가하기

일기 저장 로직은 다양한 방법으로 구현할 수 있습니다. 간단하게 로컬 스토리지에 저장할 수 있는 방법을 살펴보겠습니다. NewEntry 컴포넌트의 handleSubmit 함수에 다음 코드를 추가합니다:

const handleSubmit = (e) => {
    e.preventDefault();

    const newEntry = { title, content, date: new Date() };
    let entries = JSON.parse(localStorage.getItem('entries')) || [];
    entries.push(newEntry);
    localStorage.setItem('entries', JSON.stringify(entries));

    // 초기화
    setTitle('');
    setContent('');
};

이렇게 하면 사용자가 일기를 작성하고 저장 버튼을 클릭하면, 새로운 일기가 로컬 스토리지에 저장됩니다. 상태를 초기화하여 사용자가 다음 일기를 쉽게 작성할 수 있도록 설정했습니다.

결과 확인하기

이제 새로운 일기를 작성하고 저장된 내용을 확인해보겠습니다. Home 컴포넌트를 업데이트하여 저장된 일기 목록을 표시할 수 있습니다. src/components/Home.js 파일을 열고 다음과 같은 코드를 작성합니다:

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

function Home() {
    const [entries, setEntries] = useState([]);

    useEffect(() => {
        const storedEntries = JSON.parse(localStorage.getItem('entries')) || [];
        setEntries(storedEntries);
    }, []);

    return (
        

            
일기 목록

            
    
                {entries.map((entry, index) => (
                    
  • 
                        
    {entry.title}
    
                        
    {entry.content}
    
                        {entry.date}
                    
    • 
                ))}
            

        

    );
}

export default Home;

이제 사용자가 작성한 일기 목록이 홈 페이지에 표시됩니다. 일기 제목과 내용을 확인할 수 있으며, 날짜도 함께 표시됩니다.

스타일링 추가하기

리액트 앱을 더욱 세련되게 만들기 위해 CSS 스타일을 추가해보겠습니다. src/App.css 파일을 열고 다음과 같은 스타일을 추가합니다:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1, h2, h3 {
    color: #333;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

이제 앱의 전반적인 디자인이 개선되었으며, 사용자 친화적인 경험을 제공합니다.

마치며

이번 강좌에서는 리액트를 사용하여 일기장 앱의 “New” 페이지를 구현하는 방법을 자세히 살펴보았습니다. 사용자가 새로운 일기를 작성하고 저장할 수 있는 기본적인 기능을 제공했으며, 이를 통해 리액트의 컴포넌트 구조와 상태 관리 개념을 익힐 수 있었습니다. 추가적으로, 로컬 스토리지를 활용하여 데이터를 저장하는 방법과 CSS를 사용하여 스타일링하는 법도 배웠습니다.

앞으로 더 발전된 기능을 추가하고 앱을 확장하는 방법에 대해 고민해보길 바랍니다. 리액트의 역량을 활용하여 자신만의 멋진 프로젝트를 만들어보세요!

저자: 조광형 | [연락처 정보]