TIL 07

useRouter 사용시 주의할 점

router.push 등 useRouter를 import해서 사용하는 메소드의 경우 연결된 모든 페이지에서 사용은 가능하지만 사용한 페이지의 위치에 따라 불러오는 정보가 달라지는 등 에러가 날 수도 있기 때문에 주의해서 사용해야 한다.

map/ filter

반복문 (for 등)을 대체 가능한 메소드

//ex1
const classmates=[
  {name: '철수', age:12},
  {name: '영희', age:12},
  {name: '훈이', age:12},
  {name: '맹구', age:12}
]

const classmates2=[
  {name: '짱구', age:10, home:'서대문구'},
  {name: '철수', age:10,home:'동대문구'},
  {name: '유리', age:10, home:'중구'}
]

classmates.map((el)=> `${el.name} 어린이: ${el.age}세` )
classmates.map((el)=>({name: el.name, school:'다람쥐초등학교'}))

classmates2.map((el)=> `${el.name}어린이는 ${el.age}살이고, ${el.home}에 살고있습니다.`)

//ex2
const classmates=[
  {name: '철수', age:'13'},
  {name: '영희', age:'10'},
  {name: '훈이', age:'11'}
]

classmates.map((el)=>({name:el.name, age:el.age, school:'토끼초등학교'}))

위 코드에서 map뒤 괄호안의 el은 elements(요소)를 의미한다.

classmates.map( (el) => (0) )

이런식으로 '=>' 뒤에 el이 아닌 다른 요소를 대입하면 기존 요소가 아닌 새로 대입한 요소를 따라간다.

classmates.map( () => () ) 에서 classmates.map( (el) => el+' ' ) 등으로 소괄호를 생략할 수도 있다. 이는 화살표함수이기 때문에 가능한 로직이다.
단, 객체를 추가하기 위해 중괄호 {} 를 사용했다면 이 부분에 쓰여진 소괄호는 생략이 불가능하다.
해당 부분에 쓰인 소괄호를 생략할 경우 중괄호가 객체를 의미하는게 아니라 함수를 의미하게 바뀌기 때문.

filter

말 그대로 '필터링'하는 기능

//ex1
ages.filter ( (el) => (el>=11) )

위 코드는 요소가 11 이상인 것만 추출하게 끔 쓰여진 filter 메소드.
.map와 동일하게 객체에도 적용이 가능하고 .filter와 .map를 함께 적용하는것도 가능하다.

최신 데이터로 갱신하기

refetch

 const onClickDelete= (event) =>{
        deleteBoard({
            variables: {
                number: Number(event.target.id)
            },
            refetchQueries: [{query:FETCH_BOARDS}]
        })        
    }

삭제 등 정보가 변경되었을 때 변경된 정보를 바로 불러오게 하는 명령어로 create, delete, update 등 gql의 mutation 옵션에서 refetch를 전부 적용할 수 있다.

key와 index

key는 .map을 통해 불러온 데이터에 지정하는 값을 말한다.

어떤 데이터가 있고 그걸 삭제했을 때 내부적으로는 어떤 값이 변경된건지를 파악하기 위해 전체의 데이터를 검사하는게 기본이지만 key값을 통해 식별자를 부여했을 경우 key값에 해당하는 정보만 파악하면 되기 때문에 불필요한 과정을 줄일 수 있다. 따라서 효율성의 증대를 위해 .map을 통해 불러온 데이터에는 key값을 설정해주는 것이 좋으며 이때 key값은 고유한 값을 지정해야 혹시 있을지 모를 에러를 방지할 수 있다.
ex) 게시글의 번호, 등록한 상품의 id 등

index는 .map이 실행될 때 해당 부분이 몇번째의 데이터인지 index number를 통해 알려주는 것.

index 또한 유용하긴하지만 key값으로는 사용하지 않는다.
이유는 어떤 데이터가 와도 index는 0부터 시작해 고정된 값으로 시작하기 때문에 데이터를 삭제해도 다음 데이터가 기존 index에 위치하여 내부적인 오류가 발생할 수 있기 때문이다.

물론 index를 key로 설정해도 괜찮은 경우가 있기는 하지만 보통 API를 연결해 DB에서 받아오는 정보라면 해당하지 않는다.