Map/Filter/Every

Park Bumsoo·2022년 3월 22일

Map / Filter / Every

Map

for문 과 비슷한기능을 가지며 배열에서 사용되는 반복문이다.

사용방법

	arr.map((arr_item)=>{
			// 모든 배열의 원소에게 반복실행할 코드	
		})

ex1) 일반적으로 배열만 변경할 경우

	cosnst classmates = ["철수", "영희", "훈이"]
    classmates.map((el) => (el + "어린이"))
    
    //["철수어린이", "영희어린이", "훈이어린이"]

ex2) 객체를 변경할 경우

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

객체를 map으로 변경할 경우에는 () => ({}) 로 반환값도 객체가 되게끔 바꿔줘야한다.

	const classmates3 = [
    {name: "철수", age:13},
    {name: "영희", age:10},
    {name: "훈이", age:11}
]

	classmates3.map((el)=>({name: el.name, age: el.age, school: "토끼초등학교"}))
    
    //{name: "철수", age:13, school:"토끼초등학교"},
    //{name: "영희", age:10, school:"토끼초등학교"},
    //{name: "훈이", age:11, school:"토끼초등학교"}

위 코드처럼 직접 객체(위에선school)를 추가하는것도 가능하다.
또한 변경되는 부분은 화살표함수이기 때문에 ()가 생략이 가능하다.

    classmates.map( (el) => (el + "어린이") )
    >>>>
    classmates.map( (el) => el + "어린이" )

객체의 경우에는 생략이 불가능하다.

	const add = (aaa, bbb) => {
    	return aaa + bbb
	}

    add(1, 2)
    3
    const add2 = (aaa, bbb) => (aaa + bbb)

    const add3 = (aaa, bbb) => aaa + bbb

    const classmates= [
        { name: "철수" },
        { name: "영희" },
        { name: "훈이" }
    ]

    classmates.map((el) => { name: el.name + "어린이" })
    (3) [undefined, undefined, undefined]

Filter

filter은 조건에 충족하면 유지, 충족하지않으면 삭제하는 메서드이다.

	const classmates= [
        {name: "철수", age:13},
    	{name: "영희", age:10},
    	{name: "훈이", age:11}
    ] 
    
    classmates
    - filter((el)=>(el.age >= 11)) //age가 11이면 제외시킨다.
    - map((el)=>({name: el.name, age: el.age, school:"다람쥐초등학교"}))
    
    //{name: "철수", age:13, school:"다람쥐초등학교"},
    //{name: "영희", age:10, school:"다람쥐초등학교"},

refetchQueries

refetchQueries: [][]안의 값을 새로 가져와달라는 의미

실적용

import { useRouter } from 'next/router'
import { useQuery,gql, useMutation } from '@apollo/client'
import styled from '@emotion/styled'
//게시글 상세
const FETCH_BOARDS = gql`
   query fetchBoards{
       fetchBoards{
           number
           writer
           title
           contents
       }
   }
`
const DELETE_BOARD = gql`
   mutation deleteBoard($number: Int){
       deleteBoard(number: $number){
           message
       }
   }
`

const Row = styled.div`
   display: flex;
   flex-direction: row;
`

const Column = styled.div`
   width: 20%;
`

export default function StaticRoutedPage(){
   const router = useRouter()
   const [deleteBoard] = useMutation(DELETE_BOARD)
   const { data } = useQuery(FETCH_BOARDS)

   const onClickDelete = (event) =>{
       deleteBoard({
           variables: {number: Number(event.target.id)},
           refetchQueries: [{query: FETCH_BOARDS}]  // {query: FETCH_BOARDS}를 새로 가져와라
       })
   }
   
   console.log(data)
   return(
       <div>
       	   //map을 사용하여 아래문장을 작성하기에  =>()에 들어갈 값은 element의 각종 값이다.
           {data?.fetchBoards.map((el, index)=>(
               <Row key={el.number}> 
                   <Column><input type="checkbox"></input></Column>
                   <Column>{el.number}</Column>
                   <Column>{el.writer}</Column>
                   <Column>{el.title}</Column>
                   <Column>
                       <button id={el.number} onClick={onClickDelete}>삭제</button>
                   </Column>
               </Row>))
           }
       </div>
   )
   //고유한 값을가진 키가 필요하다.
}