저자: 조광형 | 날짜: [날짜]
소개
리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 이번 강좌에서는 리액트를 사용하여 일기장 앱을 만드는 과정을 다룰 것입니다. 우리는 앱의 “New” 페이지를 구현할 것으로, 사용자가 새로운 일기를 작성하고 저장할 수 있는 폼을 구성할 것입니다. 이 강좌에서는 리액트의 기본 개념과 컴포넌트 설계, 상태 관리, 이벤트 처리 등에 대해 자세히 설명합니다.
사전 준비사항
이 강좌를 따라가기 위해서는 다음과 같은 사전 지식이 필요합니다:
- HTML 및 CSS의 기본 이해
- 자바스크립트의 기본 문법
- 리액트의 기본 개념 (컴포넌트, props, state 등)
이 외에도 Node.js와 npm이 설치되어 있어야 하며, create-react-app을 사용하여 프로젝트를 시작하는 방법을 알고 있어야 합니다.
프로젝트 설정하기
먼저, 새로운 리액트 프로젝트를 생성합니다. 터미널을 열고 다음 명령어를 입력하여 create-react-app을 사용해 프로젝트를 생성합니다:
npx create-react-app diary-app프로젝트가 생성되면 해당 폴더로 이동하여 개발 서버를 실행합니다:
cd diary-app
npm start이제 기본적인 리액트 앱이 실행될 것입니다. 다음으로 필요한 종속성을 설치할 것입니다. 우리는 React Router를 사용할 것이므로 다음 명령어를 입력하여 설치합니다:
npm install react-router-dom라우터 설정하기
라우터를 설정하기 위해, src/App.js 파일을 열어서 다음과 같은 코드를 추가합니다:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import NewEntry from './components/NewEntry';
function App() {
return (
);
}
export default App;위의 코드에서는 두 개의 라우트를 정의했습니다. ‘/’ 경로에서는 Home 컴포넌트를, ‘/new’ 경로에서는 NewEntry 컴포넌트를 렌더링합니다.
NewEntry 컴포넌트 만들기
이제 새로운 일기를 작성할 수 있는 페이지를 구현하기 위해 src/components/NewEntry.js 파일을 생성하고 다음과 같은 코드를 작성합니다:
import React, { useState } from 'react';
function NewEntry() {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// 일기 저장 로직 추가
console.log('제목:', title);
console.log('내용:', content);
};
return (
새 일기 작성하기
);
}
export default NewEntry;위의 코드에서는 제목과 내용을 상태로 관리하고, 폼이 제출되면 콘솔에 로그를 출력합니다. 이제 일기를 저장하는 로직을 추가할 차례입니다.
일기 저장 로직 추가하기
일기 저장 로직은 다양한 방법으로 구현할 수 있습니다. 간단하게 로컬 스토리지에 저장할 수 있는 방법을 살펴보겠습니다. NewEntry 컴포넌트의 handleSubmit 함수에 다음 코드를 추가합니다:
const handleSubmit = (e) => {
e.preventDefault();
const newEntry = { title, content, date: new Date() };
let entries = JSON.parse(localStorage.getItem('entries')) || [];
entries.push(newEntry);
localStorage.setItem('entries', JSON.stringify(entries));
// 초기화
setTitle('');
setContent('');
};이렇게 하면 사용자가 일기를 작성하고 저장 버튼을 클릭하면, 새로운 일기가 로컬 스토리지에 저장됩니다. 상태를 초기화하여 사용자가 다음 일기를 쉽게 작성할 수 있도록 설정했습니다.
결과 확인하기
이제 새로운 일기를 작성하고 저장된 내용을 확인해보겠습니다. Home 컴포넌트를 업데이트하여 저장된 일기 목록을 표시할 수 있습니다. src/components/Home.js 파일을 열고 다음과 같은 코드를 작성합니다:
import React, { useEffect, useState } from 'react';
function Home() {
const [entries, setEntries] = useState([]);
useEffect(() => {
const storedEntries = JSON.parse(localStorage.getItem('entries')) || [];
setEntries(storedEntries);
}, []);
return (
일기 목록
{entries.map((entry, index) => (
-
{entry.title}
{entry.content}
{entry.date}
))}
);
}
export default Home;이제 사용자가 작성한 일기 목록이 홈 페이지에 표시됩니다. 일기 제목과 내용을 확인할 수 있으며, 날짜도 함께 표시됩니다.
스타일링 추가하기
리액트 앱을 더욱 세련되게 만들기 위해 CSS 스타일을 추가해보겠습니다. src/App.css 파일을 열고 다음과 같은 스타일을 추가합니다:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1, h2, h3 {
color: #333;
}
form {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 15px;
background: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}이제 앱의 전반적인 디자인이 개선되었으며, 사용자 친화적인 경험을 제공합니다.
마치며
이번 강좌에서는 리액트를 사용하여 일기장 앱의 “New” 페이지를 구현하는 방법을 자세히 살펴보았습니다. 사용자가 새로운 일기를 작성하고 저장할 수 있는 기본적인 기능을 제공했으며, 이를 통해 리액트의 컴포넌트 구조와 상태 관리 개념을 익힐 수 있었습니다. 추가적으로, 로컬 스토리지를 활용하여 데이터를 저장하는 방법과 CSS를 사용하여 스타일링하는 법도 배웠습니다.
앞으로 더 발전된 기능을 추가하고 앱을 확장하는 방법에 대해 고민해보길 바랍니다. 리액트의 역량을 활용하여 자신만의 멋진 프로젝트를 만들어보세요!