리액트 강좌: 일기장 앱 예제에서 Edit 페이지 구현하기

이번 강좌에서는 리액트로 간단한 일기장 앱을 구현하면서 Edit 페이지를 만드는 방법에 대해 깊이 있게 설명합니다. 이 과정을 통해 리액트의 기본 개념을 이해하고 상태 관리, 라우팅, 이벤트 처리 등의 기술을 익힐 수 있습니다.

1. 프로젝트 준비하기

먼저, 리액트 프로젝트를 생성해야 합니다. Create React App을 사용하여 간단하게 시작할 수 있습니다.

npx create-react-app diary-app

프로젝트 디렉토리로 이동한 뒤, 필요한 패키지를 설치합니다.

cd diary-app
npm install react-router-dom

2. 기본 구조 설계

일기장 앱의 기본 구조를 정의합니다. 일기장을 관리하기 위한 페이지와 각 일기를 관리하기 위한 컴포넌트를 생성합니다.

2.1. App.js 파일 수정

App.js 파일을 수정하여 라우팅을 추가합니다.


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

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

2.2. Home 컴포넌트

Home 컴포넌트는 일기 목록을 표시하는 역할을 합니다. 여기서는 예시로 사용할 더미 데이터를 배열로 만들어 사용합니다.


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

const Home = () => {
    const diaries = [
        { id: 1, title: '첫 번째 일기', content: '오늘은 좋은 날이다.' },
        { id: 2, title: '두 번째 일기', content: '리액트를 배우고 있다.' },
    ];

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

export default Home;

3. Edit 페이지 만들기

Edit 페이지에서는 선택한 일기의 제목과 내용을 수정할 수 있도록 폼을 구현합니다.

3.1. Edit 컴포넌트 생성

Edit.js 파일을 생성하고 다음과 같이 구현합니다.


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

const Edit = () => {
    const { id } = useParams();
    const history = useHistory();
  
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // 여기서 서버에 PUT 요청을 보내면 됩니다.
        console.log({ id, title, content });
        history.push('/');
    };

    return (
        
            일기 수정
            
                
                    제목:
                     setTitle(e.target.value)}
                        required
                    />
                
                
                    내용:
                     setContent(e.target.value)}
                        required
                    >
                
                
            
        
    );
};

export default Edit;

3.2. 상태 관리

리액트에서는 상태를 관리하기 위해 여러 가지 방법을 사용할 수 있습니다. 여기서 Simple State Management를 사용할 것입니다.

리액트의 useState 훅을 사용하여 제목과 내용을 상태로 관리합니다.
폼의 제출 핸들러에서는 서버에 데이터를 전송할 수 있도록 로그를 출력합니다.

4. 서버 연동

이제 실제 데이터와 연동할 차례입니다. Axios 라이브러리를 사용하여 서버 API와 통신할 수 있습니다.

npm install axios

4.1. Axios를 이용한 CRUD 구현

잡다한 CRUD 연산을 보여줄 수 있는 CRUD API를 만들어 Connect 합니다. GitHub와 분산형 서버에서 CRUD의 기본을 하겠습니다.

5. 마무리 및 배포

모든 코드를 작성하고 수정 페이지를 테스트한 후, 배포를 위한 빌드를 진행합니다. 아래 명령어를 입력하여 최적화된 배포 파일을 생성할 수 있습니다.

npm run build

결론

이번 강좌를 통해 리액트를 사용하여 간단한 일기장 앱을 만들고, Edit 페이지를 구현하는 방법에 대해 배웠습니다. 이러한 과정은 리액트를 처음 접하는 분들에게 좋은 연습이 될 것입니다.

더 많은 기능을 추가하고, 더 나아가 실제 데이터베이스와 통신할 수 있도록 발전시키는 것도 좋은 연습이 될 것입니다!