라라벨11 + 리액트 풀스택, Laravel11 + React fullstack

Laravel Breeze는 간단한 인증 및 시작 템플릿을 제공하는 패키지로, 라라벨 프로젝트에서 React와 Inertia.js를 쉽게 설정할 수 있게 도와줍니다.

Laravel Breeze를 사용한 React와 Inertia.js 설정

라라벨 프로젝트 생성
Laravel Breeze 설치 및 설정
React 설치 및 설정
라라벨과 React 통합

1. 라라벨 프로젝트 생성

새로운 라라벨 프로젝트를 생성합니다.

composer create-project --prefer-dist laravel/laravel laravel-react-inertia
cd laravel-react-inertia

2. Laravel Breeze 설치 및 설정

라라벨 Breeze를 설치합니다. Breeze는 라라벨의 인증 시스템을 포함하고 있으며, React와 Inertia.js를 설정하는 데 필요한 구성을 자동으로 처리합니다.

composer require laravel/breeze --dev
php artisan breeze:install react 
npm install 
npm run dev

3. React 설치 및 설정

Laravel Breeze를 사용하면 React와 Inertia.js 설정이 자동으로 완료됩니다. 프로젝트 구조가 다음과 같이 설정됩니다:

resources/js/Pages 디렉토리에 React 컴포넌트가 생성됨.
resources/views/app.blade.php 파일이 Inertia.js의 진입점으로 사용됨.

React와 Inertia.js가 포함된 기본 설정이 완료됩니다. webpack.mix.js 파일은 이미 설정되어 있습니다.

4. 라라벨과 React 통합

라우트 설정

라라벨의 웹 라우트 파일에서 Inertia.js를 사용하여 React 컴포넌트를 렌더링합니다.

// routes/web.php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () { return Inertia::render('Welcome'); });
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () { 
    return Inertia::render('Dashboard'); 
})->name('dashboard');

React 컴포넌트 생성

resources/js/Pages 디렉토리에 React 컴포넌트를 생성합니다. Breeze 설치 시 이미 기본적인 컴포넌트들이 제공됩니다. 추가적인 컴포넌트를 생성하여 사용할 수 있습니다.

예를 들어, Users 페이지를 생성하여 사용자를 표시하는 컴포넌트를 만듭니다.

// resources/js/Pages/Users.jsx 
import React from 'react';
import { usePage } from '@inertiajs/inertia-react';

const Users = () => { 
    const { users } = usePage().props;
    return (
        <div>
            <h1>User List</h1>
            <ul> 
                {users.map(user => ( <li key={user.id}>{user.name}</li> ))} 
            </ul>
        </div>
    );
};

export default Users;

컨트롤러에서 데이터 전송

라라벨 컨트롤러에서 데이터를 전송합니다.

// routes/web.php

Route::get('/users', function () {
    $users = \App\Models\User::all(); 
    return Inertia::render('Users', ['users' => $users]); 
});

결론

Laravel Breeze를 사용하면 React와 Inertia.js를 간편하게 설정할 수 있으며, 기본적인 인증 및 시작 템플릿을 제공합니다. 이 설정을 통해 라라벨과 React를 결합한 SPA를 쉽게 구축할 수 있습니다. Inertia.js는 서버 사이드와 클라이언트 사이드 간의 원활한 데이터 전송을 가능하게 하며, 이를 통해 복잡한 SPA 애플리케이션을 보다 쉽게 개발할 수 있습니다.

저작자표시

SevenDollars