[コードキャンプ2週目]Map,Filter

[Map]

通常、JSでMap関数を使用すると、For文を通る重複文よりも便利です.
Map関数は、各要素をマッピングして値を配列することを意味します.
For文は値を返すことはできませんが、Mapは値を返すことができます.またJSXも一緒に戻ることができます!
反応器では、できるだけ元の配列に触れないようにするのがルールです.
主にFor文でソース配列を強制的にプッシュしてソース配列を修正する方法は非常によくありません.したがって、既存のレイアウトを保持し、新しいレイアウトのMapに戻る傾向があります.
Mapは配列でのみ使用されるJavaScript関数です.
データから受信した各要素の掲示板リストなどを繰り返し表示する必要がある場合、同じUIを繰り返してデータを変更するだけでよい場合に便利です.
オブジェクトも使用できますが、配列にオブジェクトが含まれているフォーマットでなければなりません!!

const classmates=["철수","영희","훈이"]
classmate.map((el)=>{
  return el+"어린이"
})
//["철수어린이","영희어린이","훈이어린이"]

const classmate2=[{name:"철수"},{name:"영희"},{name:"훈이"}]
classmate2.map((el)=>{
  return {name: el.name + "어린이"}
})
//[{name:"철수어린이"},{name:"영희어린이"},{name:"훈이어린이"}

[受信したデータを使用して地図を描く]

Mapは、既存のアレイから新しいアレイに戻る関数だと述べています.
データ受信時にオブジェクト形式で配列内でデータを受信する場合、そのデータの配列内のオブジェクトから必要な値のみを選択し、JSX形式で返すことができます.

const classmate2=[{name:"철수"},{name:"영희"},{name:"훈이"}]
classmate2.map((el)=>{
  return <div>{el.name}</div>
})

[Filter]

Mapとは異なり、Filterは条件を満たす要素を返します.
フィルタは元のファイルの数を超えてはいけません.要素をフィルタする関数なので、既存のソースアレイよりも長くはできません.

const classmate2=[{name:"철수",age:10},{name:"영희",age:11},{name:"훈이",age:12}]
classmate2.filter((el)=>{
  return el.age >=11
})
//[{name:"영희",age:11},{name:"훈이",age:12}]

[Mapのkey]

JSでMapを使用する場合、どの部分を基準として繰り返すかが混同されているため、警告ウィンドウが出力される.

各セグメントのキー値にindexを付与し、正しい固有キー値を付与することによって代替することができる.

const MapBoardPage = () => {
  //데이터를 우선적으로 보낸상태 일때 렌더링을 시켜줄라고 하니까 undefined
  const { data } = useQuery(FETCH_BOARDS);
  return (
    <>
      <div>83011번 게시글 페이지 이동 완료!</div>
      {data?.fetchBoards.map((el,index) => {
        return (
          <FlexBox key={index}> //key값에 index 추가 함으로 경고 해결
            <MyColumn>
              <input type="checkbox"></input>
            </MyColumn>
            <MyColumn>{el.number}</MyColumn>
            <MyColumn>{el.writer}</MyColumn>
            <MyColumn>{el.title}</MyColumn>
            <MyColumn>{el.contents}</MyColumn>
          </FlexBox>
        );
      })}
    </>
  );
};

[キー値をインデックスにできない理由]

キー値はインデックスとして固有のID参照を遅らせることができますが、たとえば、投稿を削除すると削除内容が再表示され、削除されたインデックスは消えずに保持されます.インデックスは唯一の数字だから!したがって,どの投稿を削除しても,インデックス基準で削除されたことを検出できないため,必ずIDをインデックスエージェントのDBに要求し,応答するID値を基準としてキー値を用いる.