[TIL 7일차]

map / filter

map 메소드

forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.

const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

console.log(twiceNumbers);// (3) [2, 4, 6]_텍스트_

const FRUITS = [
  { number: 1, title: "레드향" }, // <div>1 레드향</div>
  { number: 2, title: "샤인머스켓" }, // <div>2 샤인머스켓</div>
  { number: 3, title: "산청딸기" }, // <div>3 산청딸기</div>
  { number: 4, title: "한라봉" },
  { number: 5, title: "사과" },
  { number: 6, title: "애플망고" },
  { number: 7, title: "딸기" },
  { number: 8, title: "천혜향" },
  { number: 9, title: "과일선물세트" },
  { number: 10, title: "귤" },
];

export default function MapFruitsPage() {
  // const mapFruitsPage = FRUITS.map((el)=><div>{el.number} {el.title}</div>)

  return(
    <div>
      {FRUITS.map((el)=><div>{el.number} {el.title}</div>)}
    </div>
    
    
  )
}

filter 메소드

filter 메소드는 배열의 요소를 하나씩 살펴보면서 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴하는 메소드.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
#### });

console.log(apples);// (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

게시판 목록 만들기

map과 filter를 사용하여 쉽게 게시판 목록을 만들어줄 수 있다.

    <>
    <div>
      {data?.fetchBoards.map((el, idx)=>(
        <Row>
          <Column><input type="checkbox" /></Column>
          <Column>{idx+1}</Column>
          <Column>{el?.title}</Column>
          <Column>{el?.writer}</Column>
          <Column>{el?.createdAt}</Column>
          <Column><button id={el.number} onClick={handleDelete}>삭제하기</button></Column>
        </Row>
      ))}
    </div>
  </>

refetch Queries

게시판 목록에서 하나를 삭제할 경우 다시 불러와서 게시판을 보여주기

  async function handleDelete(event) {
    try {
      await deleteBoard({
        variables: {number: Number(event.target.id)},
        refetchQueries: [{ query: FETCH_BOARDS }]
      })
    } catch(error) {
      alert(error.message)
    }
    
  }