리액트 강좌: 일기장 앱 예제와 최적화

최근 몇 년간, 리액트(React)는 웹 애플리케이션 개발에서 가장 인기 있는 라이브러리 중 하나로 자리 잡았습니다. 리액트를 이용하면 빠르고, 효율적이며, 재사용 가능한 UI 컴포넌트를 만들 수 있습니다. 이번 강좌에서는 리액트를 사용하여 간단한 일기장 앱을 어떻게 만드는지 살펴보겠습니다. 아울러, 성능 최적화에 관해서도 논의하겠습니다.

1. 프로젝트 설정

시작하기 전에 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 이러한 도구들은 리액트 프로젝트를 생성하고 관리하는 데 필수적입니다. 설치가 완료되었다면, 다음 명령어를 통해 새로운 리액트 프로젝트를 생성할 수 있습니다.

npx create-react-app diary-app

이 명령어는 기본적인 리액트 프로젝트 템플릿을 만듭니다. 프로젝트 폴더로 이동한 후에는 필요한 라이브러리를 설치할 수 있습니다.

cd diary-app

다음으로, 일기장 앱에 필요한 상태 관리 및 스타일링을 위한 라이브러리를 설치하겠습니다.

npm install axios bootstrap

2. 기본 구조 설계

이제 기본적인 프로젝트 구조를 설계해 보겠습니다. 일기장 앱은 다음과 같은 기본 구성 요소로 나뉩니다:

  • DiaryList: 작성한 일기의 목록을 보여주는 컴포넌트
  • DiaryEntry: 새로운 일기를 작성 또는 수정하는 컴포넌트
  • Header: 헤더 컴포넌트, 앱의 제목과 네비게이션 링크를 포함

이 컴포넌트들은 src 폴더 안에 각각의 파일로 생성될 것입니다.

3. DiaryList 컴포넌트 구현

DiaryList.js 파일을 생성하고 다음 코드를 추가합니다.

import React from 'react';

const DiaryList = ({ diaries }) => {
    return (
        

            
내 일기 목록

            {diaries.length === 0 ? (
                
일기가 없습니다.

            ) : (
                diaries.map(diary => (
                    

                        
{diary.title}

                        
{diary.content}

                        

                    

                ))
            )}
        

    );
};

export default DiaryList;

이 컴포넌트는 prop으로 받은 diaries 배열을 통해 각 일기의 제목과 내용을 보여줍니다. 일기가 없을 경우에는 적절한 메시지를 출력합니다.

4. DiaryEntry 컴포넌트 구현

이제 DiaryEntry.js 파일을 생성하고 사용자가 일기를 작성할 수 있는 폼을 구현해보겠습니다.

import React, { useState } from 'react';

const DiaryEntry = ({ onSubmit }) => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

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

    return (
        

             setTitle(e.target.value)}
                required
            />
            
            
        

    );
};

export default DiaryEntry;

이 컴포넌트는 useState 훅을 사용하여 제목과 내용을 관리하며, 사용자가 제출하면 onSubmit prop으로 전달된 함수를 호출하여 일기를 저장할 수 있도록 합니다.

5. Header 컴포넌트 구현

Header.js 파일을 생성하고 앱의 헤더를 구현합니다.

import React from 'react';

const Header = () => {
    return (
        

            
나의 일기장

        

    );
};

export default Header;

6. App 컴포넌트 구성

이제 App.js 파일을 수정하여 위에서 만든 컴포넌트들을 통합하겠습니다.

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

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

    const addDiary = (diary) => {
        setDiaries([...diaries, { id: diaries.length + 1, ...diary }]);
    };

    return (
        

            

            
            
        

    );
}

export default App;

이제 일기장 앱의 기본 구현이 완료되었습니다. 사용자는 제목과 내용을 입력하여 일기를 작성하고, 작성한 일기를 목록으로 볼 수 있습니다.

7. 최적화

리액트 애플리케이션을 구축할 때는 성능 최적화도 중요합니다. 다음은 몇 가지 최적화 기법입니다:

7.1. React.memo

리액트 컴포넌트는 기본적으로 props가 변경되므로 리렌더링됩니다. 하지만, React.memo를 사용하면 props가 바뀌지 않는 한 컴포넌트를 리렌더링하지 않게 할 수 있습니다.

const DiaryList = React.memo(({ diaries }) => {
    // 컴포넌트 내용
});

7.2. useCallback과 useMemo

useCallback 훅은 함수를 메모이제이션하여, 의존 배열이 바뀌지 않는 한 동일한 함수를 반환합니다. useMemo는 계산된 값을 메모이제이션합니다. 이렇게 해서 불필요한 리렌더링을 방지할 수 있습니다.

const addDiary = useCallback((diary) => {
    setDiaries((prevDiaries) => [...prevDiaries, { id: prevDiaries.length + 1, ...diary }]);
}, []);

7.3. Lazy Loading

리액트에서는 코드 스플리팅을 통해 Lazy Load를 사용할 수 있습니다. 필요할 때만 컴포넌트를 로드하여 초기 로딩 속도를 개선할 수 있습니다. 리액트의 React.lazy와 Suspense를 활용할 수 있습니다.

const DiaryList = React.lazy(() => import('./DiaryList'));

return (
    Loading...}>
        
    
);

8. 결론

이번 강좌에서는 리액트를 사용하여 기본적인 일기장 앱을 만들어 보았습니다. 또한, 성능 최적화 기법에 대해서도 논의하여 보다 효율적인 애플리케이션 개발 방법을 알아보았습니다. 실제 프로젝트에 적용할 때 이 코드와 최적화 기법들을 참조하여 더 나은 성능을 가진 앱을 만들어 보시기 바랍니다.

리액트는 배우기 쉽고 강력한 도구입니다. 다양한 애플리케이션을 제작해보며 더 깊이 있는 이해를 쌓길 바랍니다. Happy Coding!