리액트 강좌: 일기장 앱 예제, 리액트 라우터로 페이지 라우팅하기

이번 강좌에서는 리액트를 사용하여 간단한 일기장 웹 애플리케이션을 만드는 방법에 대해 단계별로 설명하겠습니다. 이 애플리케이션은 사용자가 일기를 작성하고, 수정하며, 삭제할 수 있는 기능을 가지고 있습니다. 또한, 리액트 라우터를 사용하여 다양한 페이지로의 라우팅을 구현하는 방법도 다룰 것입니다. 본 강좌는 초보자도 쉽게 따라 할 수 있도록 자세히 설명할 예정입니다.

목차

  1. 1. 프로젝트 소개
  2. 2. 개발 환경 설정
  3. 3. 리액트 앱 생성
  4. 4. 리액트 라우터 추가하기
  5. 5. 컴포넌트 구성하기
  6. 6. 상태 관리
  7. 7. 테스트 및 디버깅
  8. 8. 배포하기
  9. 9. 결론

1. 프로젝트 소개

일기장 앱은 사용자들이 개인적인 일기를 작성하는 공간을 제공합니다. 사용자는 새로운 일기를 작성하고, 이미 작성한 일기를 목록으로 보며, 필요할 경우 수정하거나 삭제할 수 있습니다. 이 과정에서 우리는 기본적인 리액트의 개념과 리액트 라우터의 사용법을 배우게 됩니다.

2. 개발 환경 설정

리액트를 사용하기 위해서는 Node.js와 npm(Node Package Manager)을 먼저 설치해야 합니다. Node.js와 npm을 설치하면 리액트 애플리케이션을 쉽게 생성하고 관리할 수 있습니다. 공식 웹사이트에서 다운로드 후 설치해 주세요.

Node.js 설치

Node.js 공식 웹사이트에서 운영체제에 맞는 설치 파일을 다운로드하고 설치합니다.

패키지 매니저 업데이트

설치 후, npm이 최신 버전인지 확인하고 필요하다면 업데이트합니다. 콘솔에서 다음 명령어를 입력합니다:

npm install -g npm@latest

3. 리액트 앱 생성

이제 create-react-app을 사용하여 새로운 리액트 프로젝트를 생성합니다. 콘솔에서 아래 명령어를 입력하세요:

npx create-react-app my-diary-app

프로젝트 폴더로 이동합니다:

cd my-diary-app

그 다음, 개발 서버를 시작합니다:

npm start

브라우저에서 http://localhost:3000으로 이동하여 기본 리액트 페이지가 표시되는지 확인합니다.

4. 리액트 라우터 추가하기

이제 리액트 라우터를 설치하여 애플리케이션에 라우팅 기능을 추가합니다. 다음 명령어를 입력하여 리액트 라우터를 설치합니다:

npm install react-router-dom

app/src/index.js 파일을 열어 라우터를 설정합니다:

import { BrowserRouter as Router } from 'react-router-dom';

앱을 Router로 감싸줍니다:


    ReactDOM.render(
      
        
      ,
      document.getElementById('root')
    );

5. 컴포넌트 구성하기

이제 컴포넌트를 생성하여 라우팅할 페이지를 구성해 봅시다. 일기 목록 페이지와 일기 작성 페이지를 생성합니다.

일기 목록 컴포넌트

app/src/components/DairyList.js 파일을 생성하고 아래 코드를 입력합니다:


    import React from 'react';

    const DiaryList = () => {
        return (
            

                
일기 목록

                
    
                    
  • 제목: 첫째 날, 내용: 오늘은 기분이 좋았다.
    • 
                    
  • 제목: 둘째 날, 내용: 날씨가 좋았다.
    • 
                    {/* 더 많은 일기 추가 가능 */}
                

            

        );
    };

    export default DiaryList;

일기 작성 컴포넌트

app/src/components/CreateDiary.js 파일을 생성하고 아래 코드를 입력합니다:


    import React from 'react';

    const CreateDiary = () => {
        return (
            

                
일기 작성

                

                    
                    
                    
                    
                    
                

            

        );
    };

    export default CreateDiary;

6. 상태 관리

일기장 앱에서 작성한 일기들을 상태로 관리하기 위해 React의 useState 훅을 사용해야 합니다. App.js 파일을 열고 상태를 설정합니다.


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

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

        // 일기 추가 함수 등 추가 예제 코드를 여기에 작성
            
        return (
            

                
나의 일기장

                {/* 라우팅 설정 추가 */}
            

        );
    };

    export default App;

7. 테스트 및 디버깅

애플리케이션의 각 컴포넌트와 기능이 제대로 작동하는지 테스트합니다. 원하는 결과가 나타나지 않는다면 console.log를 사용하여 디버깅을 진행합니다. 예를 들어, 상태가 예상대로 업데이트되는지 확인합니다.

8. 배포하기

배포를 위해서는 가장 먼저 앱을 빌드해야 합니다. 콘솔에서 아래 명령어를 입력하면 됩니다:

npm run build

생성된 build 폴더를 서버에 배포하면 됩니다. Firebase, Vercel, Netlify 등 다양한 배포 서비스를 사용할 수 있습니다.

9. 결론

이번 강좌에서는 리액트를 사용하여 간단한 일기장 애플리케이션을 만드는 방법과 리액트 라우터를 통해 여러 페이지로의 라우팅을 구현하는 방법에 대해 알아보았습니다. 실습을 통해 리액트의 기본적인 원리와 상태 관리, 라우팅 등의 기초를 익힐 수 있었습니다. 추가적인 기능을 구현하고 배포하는 과정에서 더 많은 경험을 쌓으시길 바랍니다.

감사합니다!