리액트는 현대 웹 애플리케이션 개발에 널리 사용되는 자바스크립트 라이브러리입니다. 이 튜토리얼에서는 리액트를 사용하여 기본적인 일기장 애플리케이션을 만드는 방법을 배울 것입니다. 가장 먼저, 이 글에서는 일기장 앱의 기능과 필요한 기술 스택을 정의한 후, Diary 페이지를 구현하는 과정을 단계별로 안내할 것입니다.
1. 일기장 앱의 기능 요구사항
일기장 앱의 기본적인 기능은 다음과 같습니다:
- 일기를 작성하고 저장할 수 있는 기능
- 저장된 일기를 목록으로 확인할 수 있는 기능
- 특정 일기를 선택하여 내용을 수정할 수 있는 기능
- 일기를 삭제할 수 있는 기능
이러한 기능들을 구현하기 위해 필요한 리액트의 기초 지식과 다른 관련 기술들을 살펴보겠습니다.
2. 필요한 기술 스택
이 예제에서는 다음과 같은 기술 스택을 사용합니다:
- React: UI 작성에 사용할 라이브러리
- React Router: 페이지 간 전환을 위한 라이브러리
- Context API: 상태 관리를 위한 React 내장 API
- CSS: 기본적인 스타일링을 위한 CSS
그럼 본격적으로 리액트 애플리케이션을 설정하는 방법을 살펴보겠습니다.
3. 리액트 애플리케이션 설정
새로운 리액트 애플리케이션을 만들기 위해, npx create-react-app diary-app 명령어를 사용합니다. 이 명령어는 기본적인 리액트 프로젝트를 설정하는 데 필요한 파일과 폴더 구조를 자동으로 생성합니다.
npx create-react-app diary-app디렉토리로 이동 후, 개발 서버를 실행해 봅시다.
cd diary-app
npm start이제 웹 브라우저에서 http://localhost:3000를 열어 기본 리액트 앱을 확인할 수 있습니다. 이제 본격적으로 일기장 애플리케이션을 개발해 보겠습니다.
4. Diary 페이지 컴포넌트 생성
Diary 페이지의 컴포넌트를 생성하기 위해, src/components/Diary.js 파일을 만들어줍니다. 그리고 아래와 같이 기본적인 구조를 설정합니다.
import React, { useContext, useState } from 'react';
import { DiaryContext } from './DiaryContext';
const Diary = () => {
const { diaryEntries, addEntry, deleteEntry } = useContext(DiaryContext);
const [entry, setEntry] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
addEntry(entry);
setEntry("");
};
return (
일기 작성
저장된 일기 목록
{diaryEntries.map((e, index) => (
-
{e}
))}
);
};
export default Diary;위 코드에서 우리는 useContext 훅을 사용하여 일기 데이터를 사용하고 있으며, useState 훅을 사용하여 입력 데이터를 관리합니다. 엔트리를 작성하는 폼과 저장된 일기 목록을 표시하는 구조입니다.
5. DiaryContext 설정
일기 데이터를 관리하고, 다른 컴포넌트와 공유하기 위해 DiaryContext를 설정합니다. src/components/DiaryContext.js 파일을 생성하고 아래의 코드를 추가합니다.
import React, { createContext, useState } from 'react';
export const DiaryContext = createContext();
export const DiaryProvider = ({ children }) => {
const [diaryEntries, setDiaryEntries] = useState([]);
const addEntry = (entry) => {
setDiaryEntries([...diaryEntries, entry]);
};
const deleteEntry = (index) => {
const newDiaryEntries = diaryEntries.filter((_, i) => i !== index);
setDiaryEntries(newDiaryEntries);
};
return (
{children}
);
};해당 파일에서는 일기 목록을 담고 있는 상태와 이를 업데이트하는 함수를 정의했습니다. 이제 App.js 파일에서 이 컨텍스트를 사용하도록 설정합니다.
6. App.js 수정
App.js 파일을 열어 아래와 같이 수정합니다.
import React from 'react';
import { DiaryProvider } from './components/DiaryContext';
import Diary from './components/Diary';
const App = () => {
return (
나의 일기장 앱
);
};
export default App;이제 DiaryProvider로 감싸서, Diary 컴포넌트가 일기 데이터를 사용할 수 있도록 했습니다. 이로써 기본적인 일기장 애플리케이션이 완성되었습니다.
7. 애플리케이션 스타일링
이제 애플리케이션에 간단한 스타일을 추가해 보겠습니다. src/App.css 파일에 다음과 같은 기본 스타일을 추가합니다.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}위의 스타일을 적용하면, 관리자 밝은 배경에 시각적으로 더 단순하고 편안한 사용자 경험을 제공합니다.
8. 결과 확인
이제 모든 설정과 코드를 완료했습니다. 실제로 웹 브라우저에서 http://localhost:3000에 접속하여 애플리케이션이 잘 작동하는지 확인해 봅시다.
일기를 작성하고, 목록에서 삭제해 보는 등의 기능 테스트를 진행합니다.
9. 추가 기능 고려사항
지금까지 기본적인 일기장 앱을 구현했습니다. 추가로 고려할 수 있는 기능들은 다음과 같습니다:
- 일기 수정 기능: 사용자가 저장한 일기를 수정할 수 있는 기능을 추가.
- 서버와의 통신: 서버에 저장된 일기를 불러오거나 저장하는 기능 추가.
- 검색 및 필터링 기능: 작성된 일기 목록을 검색하거나 날짜별로 필터링하는 기능.
- 스타일 개선: CSS 프레임워크를 사용하여 더 나은 UX/UI 제공.
10. 마무리
이번 강좌에서는 리액트를 사용하여 간단한 일기장 앱을 구현하는 방법을 배웠습니다. 일기 작성 기능과 목록 표시, 삭제 등의 기본적인 기능을 포함하고 있습니다. 이러한 기본적인 앱을 시작으로 리액트에 대한 이해를 높이고, 더 복잡한 기능을 추가하여 발전시키는 데 도움이 될 것입니다.
리액트 생태계에서 제공하는 다양한 라이브러리와 도구들을 활용하면, 사용자 경험을 더욱 풍부하게 만들어 줄 수 있습니다. 여러분도 자신만의 일기장 애플리케이션을 만들어 보시기 바랍니다. 감사합니다!