Main Page의 component 정하기

Main Page에서 반복되는 UI를 가지는 요소들을 모두 component로 만들면 재사용의 이점과 함께 유지보수도 편리하다.

실제 Watch Pedia 사이트에는 여러개의 테마를 가지고 목록을 구성하고 있지만 이번 프로젝트에서는 3개의 테마를 설정하고 그 안의 영화목록은 각각 10개씩 지정하기로 했다.

즉 한 테마에 10개의 영화를 보여주고, 3개의 테마를 구현한다.

⛳ 무엇을 component로 만들까?

우리 프로젝트는 3개의 <MainBox />를 가지고 있으며
하나의 <MainBox /> 안에는 10개의 <Film />을 자식으로 가지고 있다.

⛳ 시작은 Main.js에서

모든 요소들을 가운데 정렬하기 위해서 MainBox를 가운데 정렬 시켜줄 부모가 필요하다.
그 부모가 Main.js가 된다.

또한 추후 서버에서 데이터를 받아올 때, MainBox와 Film의 공통된 부모가 있으면 데이터를 넘겨주기 수월하다. 부모에서 자식들에게 한 번만 넘겨주면 되기 때문이다.

import React from "react";
import MainBox from "./components/MainBox/MainBox";
import "./Main.scss";

const Main = () => {

  return (
    <div className="mainWrapper">
      <MainBox />
      <MainBox />
      <MainBox />
    </div>
  );
};

export default Main;

⛳ 중심이 되는 MainBox.js

MainBox에는 영화 테마, 왓챠 피디아에서는 [박스오피스], 프로젝트에서는 [미국 고전영화]를 작성하여 영화의 테마를 명시한다.

<Film>이 부모요소인 MainBox 보다 크기가 커질 경우를 대비해서
<ul>태그에 overflow: hiidden;을 부여한다.(각각의 영화목록이 <li>태그임)

  .filmList {
    display: flex;
    overflow: hidden;
  }

<Film /> 컴포넌트를 자식으로 작성한다.

import React from "react";
import Film from "./../Film/Film";
import "./MainBox.scss";

const MainBox = ({ movies, theme }) => {

  return (
    <div className="mainBox">
      <p className="filmTheme">미국 고전영화</p>
      <ul className="filmList">
        <Film />
      </ul>
      <div className="prevBtn">
        <i className="fa-solid fa-chevron-left" />
      </div>
      <div className="nextBtn">
        <i className="fa-solid fa-chevron-right" />
      </div>
    </div>
  );
};

export default MainBox;

⛳ 영화 목록 하나하나 Film.js

<MainBox />는 <ul>태그이다.

<Film />은 <li>태그이다.

영화 포스터, 영화 제목, 영화 설명 모두 클릭이 되면 해당 영화의 상세페이지로 이동하는 범위를 가지고 있기 때문에 먼저 <Link />로 모든 요소를 감싸준다.

현재 서버에서 데이터를 어떤 형식으로 받아올 지 모르고 Mockdata를 작성하지 않았기 때문에 Hard Coding으로 작성했다.

import React from "react";
import { Link } from "react-router-dom";
import "./Film.scss";

const Film = () => {
 
  return (
    <li className="film">
      <Link to=/detail/ className="filmDetail">
        <div className="posterBox">
          <img src=/images/poster/TheGreatGatsby.jpg alt="개츠비" className="filmPosters" />
        </div>
        <div className="filmDescription">
          <p className="filmName">위대한 개츠비</p>
          <p className="filmYear">1920 • 미국</p>
        </div>
      </Link>
    </li>
  );
};

export default Film;

---

⛳ Long Story Short

전체적인 뼈대는 갖추어 졌다. 컴포넌트가 완성되니 내 머리속에도 구조가 확실히 잡혔다. 이제 데이터를 넘겨주는 props와 map함수를 작성하여 들어오는 모든 데이터가 보여지게 하자!
이전 실습 시간에 Monsters라는 예제(?)에서 5바퀴 반복하면서 익숙해진 State와 props 개념을 실제로 작성해보자!!!