【React】コンポーネント化について #JavaScript

はじめに

Reactのコンポーネントについて学んだので、アウトプットとして書いていきます。

Reactでのコンポーネント化について

コンポーネントごとにコードを書いていき、そのコンポーネントを組み合わせてUIを作成していくのがReactでの開発です。

コンポーネント化するメリット

同じコンポーネントを使いまわせる。
記述量を減らすことができる
親からコンポーネントを呼び出すときに、少しデータを変えることで、同じコンポーネントでも、表示を変えることができる。
他のコンポーネントに影響を与えないで、UIを作っていける
状態を閉じ込めて、ユーザーのアクションを作ることができる
メンテナンス性が抜群に良い
といったことが挙げられます。

コンポーネント化の手順

コンポーネントするために、別ファイルを作成して、コンポーネント化したいコードを書く
↓
importしたいファイル内のコードを埋め込みたい場所で、例えば以下のように記述。

// Footerファイルを別で作成していた場合
<HeadLine />

↓
ファイルの一番上でimport文を書く。
のような感じです。
次はpropsについて説明していきます。

propsとは

propsとは、Reactの機能の一つで、動的に画面の表示を変えるために使います。ちなみに、propsはプロパティの略です。

propsを使うメリット

・コード量を減らすことができる。
・コードのメンテナンス性を上げることができる。

propsを使ってコンポーネント化

以下がコンポーネント化の例になります。
ここでは、index.tsxファイルに加え、aboutページを加えて、その中のタイトル部分をコンポーネント化しました。
以下のHeadline.tsxファイルのコードはタイトル部分のコードになっていて、同じコードを二つのページで書かなくていいように、Headline.tsxファイルに書いて、後から

<Headline title="index page"/>

という形で呼び出しています。

title="index.page"

こちらのコードは、タイトルの部分を動的に変えるために、「props」を用いています。
そして、Headline.tsxで、以下のようにすることで、動的に画面の表示を変えることができます。

{props.title}

index.tsx

import Head from 'next/head'
import { Inter } from 'next/font/google'
import { Headline } from '@/components/Headline'
import styles from '@/styles/Home.module.css'
import { Links } from '@/components/Links'
import { Title } from '@/components/Title'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Index Page</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.description}>
        <Headline title="index page"/>
        <Title />
        </div>
        <Links />
      </main>
    </>
  )
}

Headline.tsx

import React from 'react';
import { Inter } from 'next/font/google';
import styles from './Headline.module.css';


const inter = Inter({ subsets: ['latin'] })

export function Headline(props:any) {
    return (
        <>
            <p>
                Get started by editing&nbsp;
                <code className={styles.code}>{props.title}</code>
            </p>
        </>
    )
}

about.tsxでは、

<Headline title="about page">

のように記述しているので、画面の表示も動的な変わっています。

about.tsx

import Head from 'next/head'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import {Links} from '@/components/Links'
import {Headline} from '@/components/Headline'
import { Title } from '@/components/Title'


const inter = Inter({ subsets: ['latin'] })

export default function About() {
  return (
    <>
      <Head>
        <title>About Page</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>


      <main className={styles.main}>
        <div className={styles.description}>
        <Headline title="about page">
        </Headline>
        <Title />
        </div>
        <Links />
    </main>
    </>
  )
}

このようにコンポーネント化と、動的に画面の表示を変えることができました。
以上になります。