공통 스타일 설정하기

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

프로젝트 설정

먼저, 새로운 리액트 프로젝트를 생성하겠습니다. 이를 위해 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)}
            />
             setContent(e.target.value)}
            />
            <button onclick="{addEntry}">일기 추가</button>
            {entries.map((entry, index) => (
                <diaryentry content="{entry.content}" date="{entry.date}" key="{index}" title="{entry.title}"></diaryentry>
            ))}
        
    );
};

export default App;
    

결론

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