리액트 강좌: 일기장 앱 예제, 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를 손쉽게 구현할 수 있다는 것을 잊지 마세요!

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