리액트 강좌: 일기장 앱 예제 - 공통 컴포넌트 구현하기 2: Editor 컴포넌트

이번 강좌에서는 리액트를 사용하여 일기장 앱을 개발하는 두 번째 파트로, 주로 Editor 컴포넌트를 구현하는 과정을 살펴보겠습니다. Editor 컴포넌트는 사용자가 일기를 작성하는 데 필요한 입력 필드를 제공하고, 작성된 내용을 관리할 수 있도록 도와주는 중요한 역할을 합니다. 이번 글에서는 컴포넌트의 설계 및 구현 방식, 필요한 상태 관리 방법, 사용자 경험을 향상시키기 위한 다양한 기능 구현 등을 자세히 설명하겠습니다.

1. Editor 컴포넌트의 개요

Editor 컴포넌트는 일기장 앱의 핵심 구성 요소로, 다음과 같은 기능을 수행합니다:

사용자 입력을 받을 수 있는 텍스트 영역 제공
제목 및 본문을 입력받아 저장할 수 있는 기능
입력된 내용을 검증하고 오류 메시지를 제공
작성된 내용을 부모 컴포넌트에 전달하는 이벤트 핸들러

이러한 기능을 통해 사용자는 일기를 작성하고, 이를 저장하여 나중에 확인할 수 있습니다.

2. Editor 컴포넌트 설계

Editor 컴포넌트를 설계하기 전에 어떤 데이터가 필요할지를 결정해야 합니다. 컴포넌트에서 관리할 상태는 다음과 같습니다:

제목: 일기의 제목을 입력받는 상태
본문: 일기의 내용을 입력받는 상태
오류 메시지: 입력 검증 결과 오류 메시지를 저장하는 상태

각 상태는 useState 훅을 사용하여 관리합니다.

2.1 State 초기화

import React, { useState } from 'react';

const Editor = ({ onSave }) => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [error, setError] = useState(null);

    // ...
};

2.2 Props 정의

Editor 컴포넌트는 onSave라는 props를 통해 부모 컴포넌트에서 전달된 저장 핸들러를 받을 것입니다. 이 핸들러는 사용자가 일기를 작성하고 저장할 때 호출됩니다.

3. Input 처리

Editor에서 사용하는 입력 요소는 제목과 본문에 각각 텍스트 박스를 제공하는 두 개의 input 요소와 하나의 textarea 요소입니다. 입력이 이루어졌을 때 상태를 업데이트하도록 이벤트 핸들러를 설정합니다.

3.1 입력 이벤트 핸들러

const handleTitleChange = (event) => {
    setTitle(event.target.value);
};

const handleContentChange = (event) => {
    setContent(event.target.value);
};

3.2 Render Method

이제 상태와 이벤트 핸들러를 기반으로 Editor 컴포넌트가 어떻게 렌더링될지를 정의하겠습니다. 입력 필드와 저장 버튼을 포함한 JSX 구조는 다음과 같습니다:

return (
    
        일기 작성
        
        
        {error && {error}}
        
    
);

4. 저장 기능 구현

사용자가 작성한 일기를 저장하기 위해, 저장 버튼 클릭 시 호출되는 handleSave 함수를 구현합니다. 이 함수는 입력값의 유효성을 검증하고, 문제가 없다면 부모 컴포넌트의 onSave 핸들러를 호출하는 로직을 포함합니다.

4.1 유효성 검사

const handleSave = () => {
    if (!title || !content) {
        setError('제목과 내용은 필수 항목입니다.');
        return;
    }
    setError(null);
    onSave({ title, content });
    // 입력 초기화
    setTitle('');
    setContent('');
};

5. 통합: Editor 컴포넌트를 Parent에서 사용하기

저장 기능이 구현된 Editor 컴포넌트를 사용자 인터페이스의 다른 부분과 통합해야 합니다. 부모 컴포넌트에서는 Editor를 사용하여 작성한 일기를 저장하고 리스트에 추가하는 기능을 구현합니다.

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

const DiaryApp = () => {
    const [entries, setEntries] = useState([]);

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

    return (
        
            나의 일기장
            
            
                {entries.map((entry, index) => (
                    
                        {entry.title}
                        {entry.content}
                    
                ))}
            
        
    );
};

export default DiaryApp;

6. 마무리 및 추가 기능

이번 글에서는 리액트로 일기장 앱의 Editor 컴포넌트를 구현하는 과정에 대해 다루었습니다. 사용자가 일기를 작성하고 저장할 수 있는 기초적인 기능이 마련되었습니다. 추가적으로 다음과 같은 기능을 더 고려할 수 있습니다:

저장한 일기를 수정하는 기능
일기 삭제 기능
일기를 날짜별로 정렬하거나 필터링하는 기능
작성된 일기를 로컬 스토리지나 서버에 저장하는 기능

리액트를 사용하여 다양한 컴포넌트를 조합하고 상태 관리를 통해 상호작용하는 앱을 만드는 경험은 매우 유익합니다. 앞으로도 다양한 주제에 대한 공부와 도전을 계속하시기를 바랍니다!

리액트 강좌: 일기장 앱 예제 – 공통 컴포넌트 구현하기 2: Editor 컴포넌트