리액트 강좌: 일기장 앱 예제 및 리액트 라우터로 동적 경로 라우팅하기

안녕하세요! 이번 강좌에서는 리액트를 사용하여 기본적인 일기장 앱을 만들어 보겠습니다. 이 앱은 사용자가 일기를 작성하고, 수정하고, 삭제할 수 있는 기능을 가지고 있습니다. 또한, 리액트 라우터를 사용하여 동적 경로 라우팅을 추가함으로써 각각의 일기를 개별적으로 조회할 수 있도록 할 것입니다. 이 글을 통해 리액트의 기본 개념, 상태 관리, 그리고 라우팅에 대한 깊이 있는 이해를 도와드리겠습니다.

1. 리액트란?

리액트(React)는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 구축하기 위한 컴포넌트 기반의 접근 방식을 제공합니다. 리액트를 사용하면 UI의 상태를 관리하고, 데이터의 변화에 따라 자동으로 UI를 업데이트할 수 있습니다. 그 외에도 리액트는 재사용 가능한 컴포넌트를 만들어 효율적으로 애플리케이션을 구성할 수 있게 해줍니다.

2. 프로젝트 설정

일기장 앱을 만들기 위해 리액트 프로젝트를 설정해야 합니다. 아래 명령어를 사용하여 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app diary-app

이 명령어는 `diary-app`이라는 이름의 새로운 리액트 애플리케이션을 생성합니다. 프로젝트가 생성되면 프로젝트 디렉토리로 이동합니다.

cd diary-app

3. 필요한 라이브러리 설치

리액트 라우터를 사용하기 위해 `react-router-dom` 라이브러리를 설치해야 합니다. 아래 명령어를 통해 설치해 주세요.

npm install react-router-dom

4. 프로젝트 구조

일기장 앱의 기본적인 폴더 구조는 다음과 같을 것입니다:

src/
- components/ – 리액트 컴포넌트를 저장합니다.
- pages/ – 개별 페이지를 정의합니다.
- App.js – 주요 애플리케이션 파일입니다.
- index.js – 엔트리 포인트입니다.

5. 리액트 컴포넌트 만들기

일기장 앱의 기본 UI 구조를 구성하기 위해 여러 개의 리액트 컴포넌트를 만들어야 합니다. 예를 들어, `Header`, `DiaryList`, `DiaryDetail`, `DiaryForm` 컴포넌트를 만들어 사용하겠습니다.

5.1 Header 컴포넌트

import React from 'react';

const Header = () => {
    return (
        
            일기장
        
    );
};

export default Header;

5.2 DiaryList 컴포넌트

이 컴포넌트는 작성된 일기 목록을 보여주는 역할을 합니다.

import React from 'react';
import { Link } from 'react-router-dom';

const DiaryList = ({ diaries }) => {
    return (
        
            일기 목록
            
                {diaries.map(diary => (
                    
                        {diary.title}
                    
                ))}
            
        
    );
};

export default DiaryList;

5.3 DiaryDetail 컴포넌트

선택된 일기의 세부 정보를 보여주는 컴포넌트입니다.

import React from 'react';

const DiaryDetail = ({ diary }) => {
    return (
        
            {diary.title}
            {diary.content}
        
    );
};

export default DiaryDetail;

5.4 DiaryForm 컴포넌트

새로운 일기를 작성하거나 기존 일기를 수정하는 폼입니다.

import React, { useState } from 'react';

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

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit({ title, content });
        setTitle('');
        setContent('');
    };

    return (
        
             setTitle(e.target.value)}
                required
            />
             setContent(e.target.value)}
                required
            >
            
        
    );
};

export default DiaryForm;

6. 라우터 설정하기

이제 `App.js` 파일에서 라우터를 설정하겠습니다. 이 파일에서 전체 애플리케이션의 라우팅 로직을 정의합니다.

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './components/Header';
import DiaryList from './components/DiaryList';
import DiaryDetail from './components/DiaryDetail';
import DiaryForm from './components/DiaryForm';

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

    const addDiary = (diary) => {
        setDiaries(prevDiaries => [...prevDiaries, { id: prevDiaries.length, ...diary }]);
    };

    return (
        
            
            
                 } />
                 } />
                 {
                        const diary = diaries[match.params.id];
                        return diary ?  : 일기가 존재하지 않습니다.;
                    }}
                />
            
        
    );
};

export default App;

7. 동적 경로 라우팅

리액트 라우터를 사용하여 동적 경로 라우팅을 구현할 수 있습니다. 위 예제에서 `/diary/:id` 경로는 일기 ID에 따라 일기 세부 정보를 동적으로 로드합니다. 이때 `match.params.id`를 사용하여 해당 ID의 일기를 가져옵니다.

8. 프로젝트 실행하기

위의 모든 설정이 완료되었다면, 아래 명령어를 통해 애플리케이션을 실행할 수 있습니다.

npm start

브라우저에서 http://localhost:3000으로 접속하면 일기장 앱을 사용할 수 있습니다.

9. 결론

이번 강좌에서는 리액트를 사용하여 간단한 일기장 앱을 만들어보았습니다. 이 앱은 기본적인 CRUD 기능과 함께 리액트 라우터를 사용한 동적 경로 라우팅 기능을 포함하고 있습니다. 이 과정을 통해 리액트의 구성 요소와 라우팅을 이해하고 실제 애플리케이션 개발에 적용할 수 있도록 하였습니다.

이 글이 여러분의 리액트 학습에 도움이 되었기를 바랍니다! 다음 강좌에서는 더 많은 기능을 추가하거나 다른 리액트 생태계 도구에 대해 알아보겠습니다.