필요한 곳에서 데이터 사용하기

추후 서버에서 데이터를 받아오면 해당 데이터를 Main에서 받고 자식인 MainBox와 Film에게 넘겨줘야 한다.

왜냐하면 MainBox와 Film에 데이터가 작성되어야 하기 때문이다.

그러기 위해서는 useState를 사용해서 데이터를 담아야하고,
props를 사용해서 state에 담긴 데이터를 넘겨줘야 한다.

⛳ MainBox.js에 Film.js로 map함수 사용하기

Main.js에서 MainBox 컴포넌트로 moives를 넘겨주었고 props로 {movies}를 받아온다.

movies에는 배열 안에 객체 데이터가 들어있다. 이전글을 참고하면 영화 5개에 대한 정보가 담겨 있기 때문에 배열의 길이는 5이다.

배열안의 요소를 하나씩 돌면서 작성한 함수를 적용하는 메소드는 map이 대표적이다.

import React, { useState } from "react";
import Film from "./../Film/Film";
import "./MainBox.scss";

const MainBox = ({ movies }) => {

  return (
    <div className="mainBox">
      <p className="filmTheme">미국 고전영화</p>
      <ul className="filmList">
        {movies.map(movie => (
          <Film key={movie.id} movie={movie} />
        ))}
      </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;

📌 map 함수를 작성할 때는 최상위 태그에 key 속성을 작성해야 한다.

"Each child in a list should have a unique key prop" key속성이 없을 때 나타나는 에러

따라서 movies 배열 안의 객체의 갯수만큼 반복문이 돌면서 <Film />컴포넌트에 객체 하나하나를 넘겨준다. 그 데이터를 movie에 담아서 넘겨준다.

⛳ Film.js에서 movies 구조분해할당하여 부여하기

MainBox.js에서 <Film />에 movie라는 이름으로 데이터를 넘겨주었다.

Film.js에서 movie를 받아 구조분해할당을 통해 정확히 어떤 데이터를 사용할지 명시한다.

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

const Film = ({ movie }) => {
  const { id, name, release_date, image_url, country, score_average } = movie;

  return (
    <li className="film">
      <Link to=/detail className="filmDetail">
        <div className="posterBox">
          <img src={image_url} alt="개츠비" className="filmPosters" />
        </div>
        <div className="filmDescription">
          <p className="filmName">{name}</p>
          <p className="filmYear">
            {release_date} • {country}
          </p>
          <p className="filmAverage">{score_average}</p>
        </div>
      </Link>
    </li>
  );
};

export default Film;

• return문 안에서 각각의 데이터가 쓰이는 곳에 구조분해할당된 변수들을 중괄호 안에 작성한다.
  
  위의 데이터는 간단한 mockdata를 임의로 작성하여 업로드한 자료입니다. 실제로는 각각 다른 이미지와 정보가 담겨있습니다.

• Mockdata에 담긴 배열의 요소가 5개 이므로 화면에 5개의 영화가 표현된다.
  더 작성할 수 있지만 overflow: hidden을 부여하여 어차피 화면에는 나타나지 않는다.

---

⛳ Long Story Short

워.... 내가 직접 컴포넌트를 생성하고 부모로부터 데이터를 전달하는 코드를 구현했다...
아직도 신기하다. 하면 되는구나!!! 뭔가 재미있다. 컴포넌트라는 개념이 없었다면 HTML에서 같은 요소를 복사하고 붙여넣어 코드 가독성이 떨어지고, 안예쁘고, 지저분하고 정말 내가 다 싫어하는.... 것을 컴포넌트가 이 모든 것을 제거했다.

반복문은 복잡하다고 느껴 사용하고 싶지 않았는데 반복문처럼 간단한 명령문이 코드를 몇 백줄 없애줄 수 있다는 것이 진짜 코딩을 하는 느낌을 들게한다.

확실히 개념을 배울 때와 내가 직접 구현하고 사용하고 난 후에 훨씬 머리속에 깊이 저장된다.

이제 미루고 미루었던 이미지 슬라이드 기능을 구현해 보자! 이젠 다 할 수 있을 것 같다!