[작성자:] root

리액트 강좌: 일기장앱 예제

공통 스타일 설정하기

안녕하세요! 이번 리액트 강좌에서는 일기장앱 예제를 통해 리액트를 배우고 공통 스타일을 설정하는 방법에 대해 알아보겠습니다. 리액트는 컴пон넌트 기반의 라이브러리로, 유저 인터페이스를 구축하는 데 매우 유용합니다. 이번 강좌에서 개발할 일기장앱은 사용자들이 자신의 생각과 감정을 기록할 수 있는 애플리케이션입니다.

프로젝트 설정

먼저, 새로운 리액트 프로젝트를 생성하겠습니다. 이를 위해 create-react-app을 사용할 것입니다. 아래의 명령어를 실행하여 프로젝트를 설정하세요:

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

공통 스타일 설정하기

일기장앱의 시각적 일관성을 위해 공통 스타일을 설정해야 합니다. 일반적으로 CSS 파일을 통해 스타일을 설정할 수 있지만, 리액트에서는 styled-components 혹은 CSS Modules 등의 방법을 사용할 수 있습니다. 여기서는 간단하게 App.css 파일을 사용하여 스타일을 설정하겠습니다.

기본 스타일 만들기

먼저, src/App.css 파일을 열고 아래와 같이 기본 스타일을 추가합니다:

    body {
        background-color: #f0f4f8;
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
    }

    h1 {
        color: #333;
        text-align: center;
    }

    .diary-entry {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        background: #fff;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    }

    .entry-title {
        font-size: 1.5em;
        color: #007acc;
    }

    .entry-date {
        color: #888;
        font-size: 0.9em;
    }

    .entry-content {
        margin-top: 10px;
        font-size: 1.1em;
    }

다이어리 컴포넌트 만들기

다이어리 항목을 표시할 새로운 컴포넌트를 생성합니다. src/DiaryEntry.js라는 파일을 생성하고 아래와 같이 작성합니다:

// src/DiaryEntry.js
import React from 'react';
import './App.css';

const DiaryEntry = ({ title, date, content }) => {
    return (
        

            
{title}

            
{date}

            
{content}

        

    );
};

export default DiaryEntry;

일기장 앱의 최종 구조

이제 src/App.js 파일을 열어 아래와 같이 작성하겠습니다:

// src/App.js
import React from 'react';
import DiaryEntry from './DiaryEntry';
import './App.css';

const App = () => {
    const diaryEntries = [
        { title: '첫 번째 일기', date: '2023-10-01', content: '오늘은 정말 기분 좋은 날이었어요!' },
        { title: '두 번째 일기', date: '2023-10-02', content: '비가 내리는 날이에요. 우울한 느낌이네요.' },
        { title: '세 번째 일기', date: '2023-10-03', content: '좋은 책을 읽으며 하늘을 바라봤어요.' },
    ];

    return (
        

            
나의 일기장

            {diaryEntries.map((entry, index) => (
                
            ))}
        

    );
};

export default App;

상태 관리와 스타일링

일기장앱의 스타일을 더욱 향상시키기 위해 상태 관리와 함께 다양한 스타일을 적용할 수 있습니다. 예를 들어, 일기장 항목을 추가하고 삭제하는 기능을 구현하여 사용자 경험을 개선할 수 있습니다.

상태 관리 라이브러리 사용하기

리액트의 상태 관리를 위해 useState와 useEffect 훅을 사용할 것입니다. 아래의 코드를 src/App.js에 추가하여 일기 항목을 추가할 수 있는 기능을 구현합니다:

import React, { useState } from 'react';
// import DiaryEntry from './DiaryEntry';
// import './App.css';

const App = () => {
    const [entries, setEntries] = useState([
        { title: '첫 번째 일기', date: '2023-10-01', content: '오늘은 정말 기분 좋은 날이었어요!' },
        { title: '두 번째 일기', date: '2023-10-02', content: '비가 내리는 날이에요. 우울한 느낌이네요.' },
    ]);

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

    const addEntry = () => {
        const newEntry = {
            title,
            date: new Date().toLocaleDateString(),
            content,
        };
        setEntries([...entries, newEntry]);
        setTitle('');
        setContent('');
    };

    return (
        

            
나의 일기장

             setTitle(e.target.value)}
            />
            

    );
};

export default App;

결론

이제 우리는 리액트를 사용하여 일기장앱을 구성하는 법과 공통 스타일을 설정하는 방법을 배웠습니다. 이러한 기본적인 요소들을 통해 더 복잡한 애플리케이션을 개발하는 데 필요한 기초를 확립할 수 있었습니다. 앞으로 다룰 주제로는 스타일링 라이브러리, 데이터 Fetching, 더 복잡한 상태 관리 패턴 등이 있을 것입니다. 계속해서 리액트를 배우고 실습하여 더 나은 개발자가 되기를 바랍니다!

리액트 강좌: 일기장 앱의 버튼 및 헤더 컴포넌트 구현하기

본 강좌에서는 리액트를 사용하여 일기장 애플리케이션의 공통 컴포넌트인
Button과 Header를 구현하는 방법을 단계별로 설명합니다.
일기장 앱은 사용자로 하여금 자신의 일기를 작성하고 저장할 수 있도록 해주는 웹 애플리케이션으로,
기본적인 UI 컴포넌트를 친숙하게 만들기 위해 리액트를 사용하는 것이 좋습니다.

리액트란?

리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.
웹 애플리케이션의 UI를 구축할 때 컴포넌트 기반의 구조를 통해 재사용성과 효율성을 극대화할 수 있습니다.
리액트는 상태(state)와 속성(props)을 사용하여 동적인 UI를 쉽게 관리하고 업데이트할 수 있도록 해줍니다.

공통 컴포넌트란?

공통 컴포넌트는 여러 곳에서 재사용될 수 있는 UI 요소를 의미합니다.
일기장 애플리케이션에서는 Button과 Header 같은 요소들이 자주 사용될 것이므로,
이를 컴포넌트로 분리하여 코드의 중복을 줄이고 유지보수를 용이하게 만들 수 있습니다.

프로젝트 설정

프로젝트를 시작하기 전에 먼저 리액트 환경을 설정해야 합니다.
새로운 리액트 애플리케이션을 시작하기 위해 다음의 명령어를 입력하여 리액트 앱을 생성합니다: 

npx create-react-app diary-app

이후 생성된 디렉토리로 이동하여 프로젝트를 실행합니다: 

cd diary-app
npm start

공통 컴포넌트 구현하기

1. Button 컴포넌트

Button 컴포넌트는 클릭 가능한 버튼을 생성하는 역할을 합니다.
이 컴포넌트를 통해 다양한 버튼 스타일과 기능을 쉽게 추가할 수 있습니다.
아래 코드를 통해 Button 컴포넌트를 생성해 보겠습니다. 


import React from 'react';
import './Button.css'; // 스타일을 위한 CSS 파일

const Button = ({ onClick, children, className }) => {
    return (
        
    );
};

export default Button;

위 코드에서 Button 컴포넌트는 세 가지 속성을 받습니다:

  • onClick: 버튼 클릭 시 호출될 함수
  • children: 버튼 안에 들어갈 내용
  • className: 추가적인 CSS 클래스를 적용할 수 있도록 하는 속성

이제 스타일을 정의하기 위해 Button.css 파일을 생성하겠습니다.
버튼의 기본 스타일을 아래와 같이 설정해 보겠습니다. 


.button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #0056b3;
}

2. Header 컴포넌트

Header 컴포넌트는 애플리케이션의 상단에 표시되는 제목 및 기타 요소들을 포함합니다.
다음 코드를 통해 Header 컴포넌트를 구현해 보겠습니다. 


import React from 'react';
import './Header.css';

const Header = () => {
    return (
        

            
나의 일기장

        

    );
};

export default Header;

위 코드는 일기장의 제목을 포함한 간단한 Header 컴포넌트를 생성합니다.
Header.css 파일을 생성하여 스타일을 다음과 같이 지정합니다. 


.header {
    padding: 20px;
    background-color: #f8f9fa;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.header h1 {
    margin: 0;
    color: #333;
}

App 컴포넌트에 통합하기

이제 구현한 Button과 Header 컴포넌트를 App.js에서 사용해 보겠습니다.
아래와 같이 App.js를 수정하여 두 개의 컴포넌트를 통합합니다. 


import React from 'react';
import Header from './Header';
import Button from './Button';

const App = () => {
    const handleButtonClick = () => {
        alert('버튼이 클릭되었습니다!');
    };

    return (
        

            

            

                
일기 작성하기

                
            

        

    );
};

export default App;

결론

이번 강좌에서는 리액트를 사용하여 일기장 애플리케이션의 공통 컴포넌트인
Button과 Header를 구현하는 방법에 대해 살펴보았습니다.
이러한 공통 컴포넌트를 생성함으로써 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다.
리액트의 컴포넌트 기초에 대한 이해가 깊어졌다면, 앞으로 더 복잡한 애플리케이션을 개발하는 데 큰 도움이 될 것입니다.

추가 학습 자료

React 공식 문서에서는 컴포넌트에 대한 더 많은 정보와 예제를 제공합니다.
리액트를 더욱 깊이 이해하고 싶다면 아래 링크를 참고하세요.

리액트 강좌: 일기장 앱 예제, Home 페이지 구현하기

리액트(React)는 동적인 사용자 인터페이스를 구축하는 데 많이 사용되는 라이브러리입니다. 이 강좌에서는 일기장 앱을 만들면서 리액트의 기본 개념을 살펴보겠습니다. 이 과정에서 Home 페이지도 구현하게 될 것입니다. Home 페이지는 사용자가 일기장에 접근하고 새로운 일기를 작성할 수 있는 주요 화면이 될 것입니다. 이 글에서는 리액트의 컴포넌트 구조, 상태 관리, 그리고 라우팅을 포함한 여러 가지 기술을 배우게 될 것입니다.

1. 리액트 기본 개념

리액트는 사용자 정의 컴포넌트 기반의 라이브러리입니다. 컴포넌트는 UI의 독립적인 조각으로, 각각의 컴포넌트는 상태(state)와 속성(props)을 가질 수 있습니다. 이 강좌에서는 리액트의 주요 개념인 JSX, 컴포넌트, props, state, 그리고 생명주기를 다룰 것입니다.

1.1 JSX

JSX는 자바스크립트 XML의 줄임말로, 자바스크립트 코드 안에 HTML과 같은 구문을 포함할 수 있게 해줍니다. JSX를 사용하면 UI 구성 요소를 직관적으로 작성할 수 있습니다. JSX는 컴파일 시 자바스크립트 객체로 변환됩니다.

const element = <h1>안녕하세요, 리액트!</h1>;

1.2 컴포넌트

리액트의 기본 빌딩 블록은 컴포넌트입니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 우리는 함수형 컴포넌트를 주로 사용할 것입니다.

function Greeting(props) {
  return <h1>안녕하세요, {props.name}!</h1>;
}

1.3 Props와 State

Props는 컴포넌트에 전달하는 읽기 전용 데이터입니다. 반면, State는 컴포넌트 내에서 관리하는 데이터로, 변화가 가능하며 UI의 변화에 직접적으로 영향을 미칩니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <h1>현재 카운트: {this.state.count}</h1>;
  }
}

1.4 생명주기

리액트 컴포넌트는 생명주기가 있으며, 이 생명주기 메서드를 통해 컴포넌트의 생성, 업데이트 및 제거 시점을 제어할 수 있습니다. 주요 생명주기 메서드로는 componentDidMount, componentDidUpdate, componentWillUnmount가 있습니다.

2. 일기장 앱 설계

이제 본격적으로 일기장 앱을 설계하겠습니다. 일기장 앱은 사용자가 일기를 작성하고, 수정하고, 삭제할 수 있는 기능을 갖춰야 합니다. 또한, 사용자는 작성한 일기를 리스트 형태로 조회할 수 있어야 합니다.

2.1 앱 구조

일기장 앱은 다음과 같은 구성 요소로 나눌 수 있습니다:

  • Home: 일기 리스트와 새 일기 추가 버튼을 포함하는 화면
  • DiaryEntry: 각 일기 항목을 표시하는 컴포넌트
  • AddEntry: 새 일기를 작성할 수 있는 폼을 포함하는 컴포넌트

3. Home 페이지 구현

이제 Home 페이지를 구현해보겠습니다. Home 페이지는 일기 리스트와 새 일기를 추가하는 버튼을 포함할 것입니다. 이를 위해 컴포넌트를 두 개 생성하겠습니다: Home 컴포넌트와 DiaryEntry 컴포넌트입니다.

3.1 Home 컴포넌트

import React, { useState } from 'react';
import DiaryEntry from './DiaryEntry';
import AddEntry from './AddEntry';

function Home() {
  const [entries, setEntries] = useState([]);

  const addEntry = (entry) => {
    setEntries([...entries, entry]);
  };

  return (
    <div>
      <h1>나의 일기장</h1>
      <AddEntry onAdd={addEntry} />
      <ul>
        {entries.map((entry, index) => (
          <DiaryEntry key={index} entry={entry} />
        ))}
      </ul>
    </div>
  );
}

export default Home;

3.2 DiaryEntry 컴포넌트

import React from 'react';

function DiaryEntry({ entry }) {
  return (
    <li>
      <h2>{entry.title}</h2>
      <p>{entry.content}</p>
    </li>
  );
}

export default DiaryEntry;

3.3 AddEntry 컴포넌트

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ title, content });
    setTitle('');
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={title} 
        onChange={(e) => setTitle(e.target.value)} 
        placeholder="제목" 
      />
      <textarea 
        value={content} 
        onChange={(e) => setContent(e.target.value)} 
        placeholder="일기 내용" 
      />
      <button type="submit">일기 추가</button>
    </form>
  );
}

export default AddEntry;

4. 전체 앱 코드

이제 모든 컴포넌트를 모아서 전체 앱을 구성해보겠습니다. src 디렉토리 아래에 index.js 파일을 작성하겠습니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './Home';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

5. 결론

이번 리액트 강좌에서는 일기장 앱을 통해 리액트의 기본 개념과 컴포넌트 기반 설계를 배웠습니다. Home 페이지를 구현하면서 State 관리와 Props 전달 방식도 이해할 수 있었습니다. 리액트를 통해 사용자 친화적인 UI를 손쉽게 구현할 수 있다는 것을 잊지 마세요!

앞으로 더 많은 기능을 추가하며 리액트의 심화 개념을 탐구해보세요. 다른 페이지로의 라우팅, 데이터 저장 및 불러오기와 같은 기능을 추가하면 더욱 완전한 앱이 될 것입니다. 감사합니다!

리액트 강좌: 일기장 앱 예제 – New 페이지 구현하기

저자: 조광형 | 날짜: [날짜]

소개

리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 이번 강좌에서는 리액트를 사용하여 일기장 앱을 만드는 과정을 다룰 것입니다. 우리는 앱의 “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 (
        

            
새 일기 작성하기

            

                

                    
                     setTitle(e.target.value)}
                    />
                

                

                    
                    
                

                
            

        

    );
}

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를 사용하여 스타일링하는 법도 배웠습니다.

앞으로 더 발전된 기능을 추가하고 앱을 확장하는 방법에 대해 고민해보길 바랍니다. 리액트의 역량을 활용하여 자신만의 멋진 프로젝트를 만들어보세요!

저자: 조광형 | [연락처 정보]

리액트 강좌: 일기장앱 예제 – Diary 페이지 구현하기

리액트는 현대 웹 애플리케이션 개발에 널리 사용되는 자바스크립트 라이브러리입니다. 이 튜토리얼에서는 리액트를 사용하여 기본적인 일기장 애플리케이션을 만드는 방법을 배울 것입니다. 가장 먼저, 이 글에서는 일기장 앱의 기능과 필요한 기술 스택을 정의한 후, 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. 마무리

이번 강좌에서는 리액트를 사용하여 간단한 일기장 앱을 구현하는 방법을 배웠습니다. 일기 작성 기능과 목록 표시, 삭제 등의 기본적인 기능을 포함하고 있습니다. 이러한 기본적인 앱을 시작으로 리액트에 대한 이해를 높이고, 더 복잡한 기능을 추가하여 발전시키는 데 도움이 될 것입니다.

리액트 생태계에서 제공하는 다양한 라이브러리와 도구들을 활용하면, 사용자 경험을 더욱 풍부하게 만들어 줄 수 있습니다. 여러분도 자신만의 일기장 애플리케이션을 만들어 보시기 바랍니다. 감사합니다!