React で propsを使ってみた

概要

今回はReactでのpropsの使い方についてまとめました。

propsとは親コンポーネントから値を受け取る際に使用されるものになります。

今回のpropsの基本的は使用手順

①TopPage.tsxファイル（親コンポーネントファイル）で使用するpropsの定義

　（例）MovieList.tsxファイル内で使用
　　type Props = { movieList: MovieListType };

② ①で定義したPropsを型として、MovieList.tsx内で使用する
③引数にpropsを渡し、propsを使用できる様にする
　（例）MovieList.tsxファイル内で使用
　 const MovieList: React.FC = (props) => {}

④型定義した movieList 内にuseStateで定義した変数{movieList}を代入している。

　（例）MovieList.tsxファイル内で使用
< MovieList movieList={movieList} />

「その他props」の値を使用した場面
map関数で使用するため、type Props = { movieList: MovieListType }; で定義した
配列のpropsの値「movieList」をprops.movieList　で取り出し、movieListに格納している。
　（例）TopPage.tsxファイル内で使用
const movieList = props.movieList

propsの使用場面とコードの紹介

movieTypes.ts（型定義ファイルの全体）

/* MovieItemType にオブジェクトとして型を定義している。
   映画情報の型の定義
   （id（数値型）、
     poster_path:映画のポスター画像（文字列）;
     title:映画タイトル（文字列）;
     overview:映画の概要説明（文字列））*/
export type MovieItemType = {
  id: number;
  poster_path: string;
  title: string;
  overview: string;
};
// ↑で定義したオブジェクトの MovieItemType を配列に変換し、それを変数の MovieListType としている
export type MovieListType = MovieItemType[];

MovieList.tsx（全体）

import React from "react";
import { MovieListType } from "../../types/movieTypes";
import MovieItem from "../movieItem/MovieItem";
import styles from "./MovieList.module.scss";

/* {}内にある movieList にmovieTypes.tsファイルで
   定義した型（MovieListType（配列））を適用している。
   また、TopPage.tsxで使用する、
   MovieListコンポーネントにわたすべきPropsの型も定義している */
type Props = { movieList: MovieListType };

// ↑で定義した型（porps）を下記のコードの引数に渡している
const MovieList: React.FC<Props> = (props) => {
  /* 上で定義した、型付きの配列（movieList）を
     map関数で展開するため1つ1つのMolvieItemに渡していく */
  const movieList = props.movieList;

  // movieList配列（20個のデータ）の情報を1つ1つ展開している
  return (
    <div className={styles.root}>
      {movieList.map((movie) => {
        return <MovieItem item={movie} key={movie.id} />;
      })}
    </div>
  );
};

export default MovieList;

下記のコードは上のコード内のprops部をピックアップ

type Props = { movieList: MovieListType };
// ↑で定義した型（Porps）を下記のコードの引数に渡している
const MovieList: React.FC<Props> = (props) => {

  const movieList = props.movieList;

1行目
TopPage.tsxに渡すためのPropsの作成と、そのProps内のMovieListType
にmovieTypes.tsで定義した型を適応している。

type Props = { movieList: MovieListType };

2行目
ここでは1行目で定義したPropsを型として　< Props >　の形で適応している 。
また引数にpropsを定義し、このファイルでpropsが使いえる様にしている。

const MovieList: React.FC<Props> = (props) => {

TopPage.tsx

const TopPage: React.FC = () => {
  const [movieList, setMovieList] = useState<MovieListType>([
    { id: 0, poster_path: "", title: "", overview: "" },
  ]);

  // APIキーを「ApiKey」に格納
  const ApiKey = process.env.REACT_APP_MOVIE_APIKEY;
  //非同期通信を行う際は「async」が必要になる
  useEffect(() => {
    const fetchTrendMovies = async () => {
      //tryでApiが正常に動作したときの処理を書く
      try {
        const response = await axios.get(
          "https://api.themoviedb.org/3/trending/movie/day",
          {
            params: {
              api_key: ApiKey,
            },
          }
        );
        //moviesに映画情報の一覧（配列）を格納している
        const movies = response.data.results;
        // ↑で定義したmoviseを使用し映画の情報の一覧を配列で取得する。
        setMovieList(movies);
      } catch {}
    };

    fetchTrendMovies();
    // 第2引数で発火のタイミングを設定
  }, [ApiKey]);

  return (
    <div className={styles.root}>
      <header>
        <Header />
      </header>
      <main>
        <MovieList movieList={movieList} />
      </main>
      <footer></footer>
    </div>
  );
};

TopPage.tsx内のuseStateで初期値に「id」「poster_pathtitle」「overview」
の配列データをWeb Api から受け取る「movieList」がある。

const TopPage: React.FC = () => {
  const [movieList, setMovieList] = useState<MovieListType>([
    { id: 0, poster_path: "", title: "", overview: "" },
  ]);

↓のコードでsetMovieListの更新が行われる。

      const movies = response.data.results;
        // ↑で定義したmoviseを使用し映画の情報の一覧を配列で取得する。
        setMovieList(movies);

それを下の様にmainタグでカッコている< MovieList movieList={movieList} />に
反映している。
movieList={movieList}　部のmovieListはMovieList.tsxファイルで定義している
type Props = { movieList: MovieListType };　のmobieList部にあたる。

また、 < MovieList movieList={movieList} />にある　{movieList} 部は
TopPage.tsxファイル内で定義しているuseStateの変数にあたる。

return (
    <div className={styles.root}>
      <header>
        <Header />
      </header>
      <main>
        <MovieList movieList={movieList} />
      </main>
      <footer></footer>
    </div>
  );
};

まとめ・今後の課題

今回はReactでpropsを使ったコードの紹介を行いました。
TypeScriptも使用したため、型の指定を行いました。
なんとなくでも伝わる記事になればと思います。