리액트 강좌: 일기장 애플리케이션 예제 및 페이지 라우팅

안녕하세요! 이번 강좌에서는 리액트를 사용하여 간단한 일기장 애플리케이션을 만들어보겠습니다. 이 애플리케이션에서는 사용자가 일기를 작성하고, 이를 저장하고, 조회할 수 있는 기능을 구현합니다. 또한, 페이지 라우팅을 통해 다양한 페이지를 구성하는 방법도 배워보겠습니다.

1. 리액트란 무엇인가?

리액트(React)는 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다. 사용자 인터페이스를 구축하는 데 초점을 맞추고 있으며, 컴포넌트 기반으로 설계되어 있어 재사용성이 뛰어납니다. 리액트는 가상 DOM을 사용하여 성능을 최적화하며, 개발자가 더 쉽게 동적인 웹 애플리케이션을 만들 수 있도록 도와줍니다.

2. 프로젝트 환경 설정

일기장 애플리케이션을 만들기 위해 가장 먼저 할 일은 개발 환경을 설정하는 것입니다. create-react-app을 사용하여 기본 템플릿을 생성해봅시다.


npx create-react-app diary-app
cd diary-app
npm start

위의 명령어를 실행하면 리액트 프로젝트가 생성되고, 기본적인 개발 서버가 시작됩니다. 이제 기본 프로젝트에 필요한 패키지를 설치하겠습니다.


npm install react-router-dom

3. 컴포넌트 구조 설계

이제 애플리케이션의 기본 구조를 설계해 보겠습니다. 일기장 애플리케이션은 다음과 같은 컴포넌트로 구성될 수 있습니다:

  • Home: 메인 페이지, 이전 일기를 목록으로 보여줍니다.
  • DiaryEntry: 일기를 작성할 수 있는 페이지입니다.
  • DiaryDetail: 선택한 일기의 상세 내용을 보여줍니다.

4. 페이지 라우팅 구현하기

리액트를 사용하여 여러 페이지로 구성된 애플리케이션을 만들기 위해 react-router-dom을 활용하여 라우팅을 구현합니다. 먼저, 라우터를 설정해 보겠습니다.


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

function App() {
    return (
        
            
                
                
                
            
        
    );
}

export default App;

5. 컴포넌트 구현하기

Home 컴포넌트

Home 컴포넌트는 사용자가 이전 일기를 볼 수 있는 페이지입니다. 일기 목록과 함께 새로운 일기를 작성할 수 있는 링크를 제공합니다.


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

function Home() {
    return (
        

            
일기장

            새 일기 작성하기
            {/* 일기 목록을 여기에 추가합니다 */}
        

    );
}

export default Home;

DiaryEntry 컴포넌트

DiaryEntry 컴포넌트는 새로운 일기를 작성하는 페이지입니다. 사용자가 제목과 내용을 입력하고, 저장 버튼을 클릭하면 작성한 일기가 저장됩니다.


import React, { useState } from 'react';

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

    const handleSubmit = (e) => {
        e.preventDefault();
        // 일기 저장 로직
        console.log({ title, content });
    };

    return (
        

            
일기 작성

            

                 setTitle(e.target.value)}
                    required
                />
                

        

    );
}

export default DiaryEntry;

DiaryDetail 컴포넌트

DiaryDetail 컴포넌트는 선택한 일기의 상세 내용을 보여주는 페이지입니다. 일기의 제목과 내용, 기타 메타데이터를 표시합니다.


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

function DiaryDetail() {
    const { id } = useParams();
    
    // 여기에 id에 해당하는 일기 데이터를 가져오는 로직이 필요합니다.

    return (
        

            
일기 상세페이지 (ID: {id})

            {/* 일기 내용 출력 */}
        

    );
}

export default DiaryDetail;

6. 데이터 저장 및 불러오기

사용자가 작성한 일기를 저장하기 위해서는 상태 관리가 필요합니다. 이 예제에서는 간단하게 리액트의 상태를 사용하여 데이터 저장을 구현해 보겠습니다. 복잡한 애플리케이션을 작성할 경우, 리덕스(Redux)나 컨텍스트 API(Context API)를 사용하여 상태 관리를 하는 것이 좋습니다.

일기 데이터 관리


import React, { useState } from 'react';

// App 컴포넌트에서 일기 데이터를 관리합니다.
function App() {
    const [diaries, setDiaries] = useState([]);
    
    const addDiary = (diary) => {
        setDiaries([...diaries, diary]);
    };

    return (
        
            
                
                    
                    
                    
                
            
        
    );
}

7. 마무리

이번 강좌에서는 리액트를 사용하여 일기장 애플리케이션을 만드는 방법과 페이지 라우팅을 구현하는 방법에 대해 알아보았습니다. 리액트의 컴포넌트 구조와 데이터 관리를 통해 쉽게 다양한 기능을 추가할 수 있으며, 사용자와의 상호작용을 보다 매끄럽게 할 수 있습니다.

위의 예제를 기반으로 더 다양한 기능을 추가할 수 있습니다. 예를 들어, 일기를 수정하거나 삭제하는 기능을 추가하거나, 사용자 인증을 도입하여 개인적인 일기장으로 확장할 수 있습니다.

8. 추가 공부 자료

리액트를 더욱 잘 이해하기 위해 다음 자료를 참고해보세요:

9. 질문 및 답변

이 강좌에 대해 질문이 있으시면 댓글을 남겨주시면 감사하겠습니다. 함께 고민하고 발전하는 자리가 되었으면 합니다!