블레이드 템플릿 - Components

https://laravel.kr/docs/7.x/blade#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

라라벨 7.x - 블레이드 템플릿

여기서 참고하고 이해 해보려고 했으나 솔직히 무슨말인지 잘 모르겠다... ㅜㅜ

콘솔창에

php artisan make:component MovieCard

이 명령어를 입력 시키면 

컴포넌트는 app/View/Components 디렉토리 및 resources/views/components 디렉토리에서 자동으로 감지

자동으로 생성 됬는지 확인해본다.

 

확인해보면 

app/View/Components/MovieCard.php

resources/views/components/movie-card.blade.php가 생긴걸 확인할 수 있다.

 

그리고 생성된 컴퍼넌트를 사용하고자하면 

<x-movie-card/>

즉, <x-컴퍼넌트 이름/> 이렇게 원하는곳에 넣으면 사용 가능한것 같습니다!

컴퍼넌트에 적을 html코드들은  resources/views/components/movie-card.blade.php 요기

거기에 데이터를 전달받아 처리하거나 컨트롤 하는건 

app/View/Components/MovieCard.php 요기

자 이제 이걸 어떻게 사용하는지 한번 공부 해보자.

 

내가 컴포넌트로 쪼갤 부분은 바로 이곳

 

바로 이 한부분이다.

@foreach($popularMovies as $movie)

@endforeach 

이런식으로 여기 안에 저게 api로 넘어온 갯수만큼 foreach문이 돌면서 포스터가 뿌려 졌을테니

저기부분을 컴퍼넌트로 처리한다 근데 여기서 처리할때 중요한게 우리가 필요한 데이터가 

Movies.Controller.php에서 2가지가 있었다.

 

return view('index',[
'popularMovies' => $popularMovies,
'nowPlayingMovies' => $nowPlayingMovies,
'genres'=> $genres,
]);

'popularMovies' 와 'nowPlayingMovies'은

공통적인 부분이라고 치고 'genres'를 포함해서 총 2개의 데이터를 컴퍼넌트에 넘겨야 하는것임!!!

index.blade.php에서

@foreach($popularMovies as $movie)
<x-movie-card :movie="$movie" :genres="$genres"/>
@endforeach

이런식으로 컴퍼넌트하나마다 movie와 genres를 보낸다.

보낸 데이터를 

app/View/Components/MovieCard.php 이곳에서

public function __construct($movie, $genres)
{
   $this ->movie = $movie;
   $this ->genres = $genres;
}

기본생성자 메소드에서 받고 받기전에 멤버변수 설정해야함!!!

 

class MovieCard extends Component
{

  public $movie;
  public $genres;

   public function __construct($movie, $genres)
  {
    $this ->movie = $movie;
    $this ->genres = $genres;
  }

}

 

그것을 가지고 

public function render()
{
return view('components.movie-card');
}

 

render함수를 통해 컴퍼넌트인 

resources/views/components/movie-card.blade.php 이쪽으로 리턴한다!!

@foreach($movie as $test)
{{$movie['title']}}
@endforeach

movie-card.blade.php에서 잘 넘어오는지 foreach문 돌려보고 화면에서 확인해보니

잘 나온다!!!

 

index.blade.php에서는 결과적으로 풀소스는 이렇게 되겠다. 이런식으로 컴퍼넌트를 이용해서 $popularMovies와 $nowPlayingMovies 연관배열을 같은 컴퍼넌트로 같은 변수로 보내서 처리한다!!!

 

좀 더 이해하기 위해 나는 

https://developers.themoviedb.org/3/movies/get-upcoming

API Docs

곧 개봉하는 영화 카테고리를 한번 추가해 보겠다!!!

 

MoviesController.php에서

$upcoming = Http::withToken(config('services.tmdb.token'))
->get('https://api.themoviedb.org/3/movie/upcoming?language=ko-KR')
->json()['results'];

 

dump($upcoming);

덤프로 출력

잘 들고 오는거 확인 후 view함수에 리턴값 추가!

return view('index',[
'popularMovies' => $popularMovies,
'nowPlayingMovies' => $nowPlayingMovies,
'upcoming' => $upcoming,
'genres'=> $genres,
]);

 

index.blade.php

추가(전)

추가(후)

진심 1분도 안되서 곧 개봉 할 영화 카테고리를 추가했다!!!! 컴퍼넌트는 신세계다 ㄷㄷ;;