리액트 강좌: 일기장 앱 예제, 프로젝트 준비하기

리액트(React)는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리로, 개발자들이 보다 효율적이고 직관적으로 웹 애플리케이션을 만들 수 있도록 돕습니다. 본 강좌에서는 리액트를 이용하여 간단한 일기장 앱을 만드는 과정을 통해 리액트의 기초적인 개념을 배우고, 실제 프로젝트를 준비하기 위한 과정까지 상세히 설명하겠습니다.

1. 리액트란?

리액트는 선언적이고 컴포넌트 기반의 웹 애플리케이션 개발을 가능하게 해주는 라이브러리입니다. 페이스북에서 개발하였으며, 현재는 많은 기업과 개발자들에 의해 사용되고 있습니다. 리액트의 주요 장점은 다음과 같습니다:

  • 재사용 가능한 컴포넌트: 리액트는 UI를 컴포넌트라는 작은 단위로 나누어 개발할 수 있게 해줍니다. 이렇게 만들어진 컴포넌트는 다른 곳에서도 쉽게 재사용할 수 있습니다.
  • 가상 DOM: 리액트는 가상 DOM(Virtual DOM)을 사용하여 실제 DOM 조작을 최소화할 수 있습니다. 이는 성능을 크게 향상시킵니다.
  • 단방향 데이터 흐름: 데이터가 한 방향으로만 흐르기 때문에, 데이터의 상태를 예측하기 쉽고 코드의 유지보수가 용이합니다.

2. 일기장 앱 프로젝트 개요

이번 프로젝트에서는 사용자가 일기를 작성하고, 목록으로 확인하며, 삭제할 수 있는 간단한 일기장 앱을 만들 것입니다. 기본적인 기능은 다음과 같습니다:

  • 일기 목록 보기
  • 새로운 일기 작성하기
  • 일기 삭제하기

이러한 기능을 구현하기 위해 리액트의 상태 관리 및 컴포넌트 간의 데이터 전달 방식을 학습할 것입니다.

3. 개발 환경 세팅

프로젝트를 시작하기 전에 리액트 개발 환경을 세팅해야 합니다. 다음과 같은 도구들을 설치해야 합니다:

  • Node.js: 리액트 애플리케이션을 실행하고 관리하기 위한 서버 사이드 자바스크립트 런타임입니다.
  • npm 또는 yarn: 자바스크립트 패키지 매니저로, 리액트 관련 라이브러리를 설치하는 데 사용됩니다.
  • 코드 편집기: VSCode, Atom 등 코드 작업을 위한 편집기를 선택합니다.

Node.js가 설치되었다면, 아래의 명령어로 create-react-app을 사용하여 프로젝트를 생성합니다:

npx create-react-app diary-app

위 명령어를 실행하면 diary-app이라는 이름의 폴더가 생성되고, 기본적인 리액트 구조가 설정됩니다. 생성된 폴더로 이동하고, 개발 서버를 실행합니다:

cd diary-app
npm start

브라우저에서 http://localhost:3000를 열면 기본 페이지를 확인할 수 있습니다.

4. 컴포넌트 구조 설계

앱의 컴포넌트 구조는 다음과 같이 설계합니다:


    - App
        - DiaryList
        - DiaryForm

App 컴포넌트는 최상위 컴포넌트로 상태(state)를 관리합니다. DiaryList 컴포넌트는 일기 목록을 표시하며, DiaryForm 컴포넌트는 새로운 일기를 작성하는 폼을 제공합니다.

5. 상태(state) 관리

리액트 컴포넌트에서 상태(state)는 컴포넌트의 데이터를 관리하는 방법입니다. App 컴포넌트에서 일기 데이터를 관리하기 위해 useState 훅을 사용할 것입니다. 예를 들어, 초기 상태는 빈 배열로 설정합니다:


import React, { useState } from 'react';

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

            {/* 컴포넌트들 */}
        

    );
};

6. 일기 작성 폼 구현하기

DiaryForm 컴포넌트를 생성하여 사용자가 일기를 작성할 수 있도록 합니다. 사용자 입력을 처리하기 위해 input 태그를 만들고, useState 훅을 통해 입력 값을 관리합니다:


const DiaryForm = ({ onAdd }) => {
    const [text, setText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(text);
        setText('');
    };

    return (
        

             setText(e.target.value)}
                placeholder="일기를 작성하세요"
            />
            
        

    );
};

7. 일기 목록 표시하기

DiaryList 컴포넌트를 생성하여 추가된 일기의 목록을 표시합니다. 일기는 map 함수를 사용하여 렌더링합니다:


const DiaryList = ({ diaries, onDelete }) => {
    return (
        
    
            {diaries.map((diary, index) => (
                
  • 
                    {diary}
                    
                
    • 
            ))}
        

    );
};

8. App 컴포넌트에서 끼워넣기

이제 각 컴포넌트를 App 컴포넌트에 통합합니다. 일기를 추가하고 삭제하는 기능을 연결합니다:


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

    const addDiary = (text) => {
        setDiaries([...diaries, text]);
    };

    const deleteDiary = (index) => {
        setDiaries(diaries.filter((_, i) => i !== index));
    };

    return (
        

            
            
        

    );
};

9. CSS 스타일링

일기장 앱을 보다 보기 좋게 만들기 위해 CSS 스타일을 추가할 수 있습니다. src/App.css 파일을 만들어 기본적인 스타일을 설정합니다:


body {
    font-family: Arial, sans-serif;
}

form {
    margin-bottom: 20px;
}

input {
    margin-right: 10px;
    padding: 5px;
}

button {
    padding: 5px 10px;
}

이제 앱을 새로 고치면 기본적인 스타일이 적용된 일기장 앱을 확인할 수 있습니다.

10. 추가적으로 고려할 사항들

이번 강좌에서는 기본기능만 설명했지만, 실제로 프로젝트를 진행하면서 다음과 같은 기능을 추가할 수 있습니다:

  • 일기 작성 날짜 및 시간 기록하기
  • 일기 수정 기능 추가하기
  • 사용자 인증 기능 추가하기
  • 서버와 데이터 통신하기 (REST API)

11. 프로젝트 배포

프로젝트가 완료되면, 웹에 배포하여 실제 환경에서 앱을 사용할 수 있습니다. Vercel, Netlify와 같은 서비스를 이용하면 간편하게 배포할 수 있습니다. 먼저, 앱을 빌드하고 배포하는 과정을 설명하겠습니다.

npm run build

위 명령어를 실행하면 build 폴더가 생성되며, 이 폴더 안의 파일들이 실제로 배포될 파일들입니다. 이 파일을 Vercel이나 Netlify에 업로드하여 배포하면 됩니다.

결론

이번 강좌를 통해 리액트를 이용한 일기장 앱 개발 과정을 알아보았습니다. 기본적인 컴포넌트 구조 설계부터 상태 관리, 스타일링, 배포 과정까지 살펴보았습니다. 실제로 프로젝트를 진행하면서 자신만의 기능을 추가해 보면서 리액트를 더욱 깊게 이해할 수 있을 것입니다. 앞으로 더 많은 리액트 기능을 탐구하고 발전시키기를 바랍니다!

참고 자료