React의 배열 처리

React를 사용하면 프런트 엔드에서 동일한 반복 값 처리를 쉽게 구현할 수 있습니다.

사전 지식

HTML 기초

자바 스크립트 기초

React의 기초

이러한 전제 지식이 있는 정으로 이야기해 갑니다.
이번에는 React 프레임 워크의 Next.js에서 구현하겠습니다! !

npm init next-app アプリ名

우선 사쿠토 Next.js를 시작합니다.
오류가 발생한 사람은

node -v
yarn -v
npm -v

여기를 확인합시다.

그런 다음 componets 디렉토리를 작성하고 그 아래에 items 컴포넌트의 디렉토리를 작성하십시오.

cd アプリ名
mkdir components
cd conmponents
mkdir items
cd items
touch index.jsx

items/index.jsx

import React from "react";
const ITEMS = [
  {
    id: 1,
    title: "一番最初のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 2,
    title: "2番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 3,
    title: "3番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
]
const Items = () => {
  return (
    <React.Fragment>
      {ITEMS.map((item) => {
        return (
        <div>
          <p>{ item.title }</p>
          <p>{ item.body }</p>
        </div>
        )
      })}
    </React.Fragment>

  )
}
export default Items

일단 구현합니다.
설명으로서 ITEMS의 배열을 정의해, 그 안에서 루프 시키고 싶은 처리를 써 갑니다.
그런 다음 map 메소드로 ITEMS 내용을 반환합니다.
(이 때 자신은 map 후의 return을 잊고, 영원으로 표시되지 않는 자체가 놓았습니다, , ​​놓치지 않고)

Items 컴포넌트를 확실히 export합시다.

pages/index.js

import Items from "../components/items"

export default function Home() {
  return (
    <>
      <Items></Items>
    </>
  )
}

Items 구성 요소를 가져옵니다.
<>는의 약어입니다.
어느 쪽이든 괜찮습니다만, 쓸 때는 어느 쪽인가에 통일합시다.


할 수 있었어! ! !
,,,,,,,

오류가 발생했습니다.

Warning: Each child in a list should have a unique "key"prop
키가 없다고 경고가 나옵니다.

htps : // Rea ctjs. 오 rg / 두 cs / ㎃ st - 안 d 케 ys. html # 케 ys-무 st-on ly-beu 니쿠에 아몬 g-b b gs
참고 기사
Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

배열의 키는 형제간에 고유해야 합니다.

결론 → 부모 요소에 key를 설정하면 해결

pages/index.jsx

import React from "react";
const ITEMS = [
  {
    id: 1,
    title: "一番最初のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 2,
    title: "2番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
  {
    id: 3,
    title: "3番目のタイトルが入ります",
    body: "テキストが入りますテキストが入りますテキストが入ります"
  },
]
const Items = () => {
  return (
    <React.Fragment>
      {ITEMS.map((item) => {
        return (
        <div key={item.id}>
          <p>{ item.title }</p>
          <p>{ item.body }</p>
        </div>
        )
      })}
    </React.Fragment>

  )
}
export default Items

덧붙여서 키는 index에서도 전달할 수 있습니다만, 이쪽은 그다지 추천되어 있지 않은 것 같습니다.