Hun's Blog ✍️

Array.at과 Array[idx]의 차이


Array.at(idx)은 es2022부터 등장한 메소드이다.

기존 방식의 Array[idx]과 어떤 차이가 있는지 알아보자.

차이

가장 극명한 차이는 음수 인덱스 지원에 있다.

const arr = [10, 20, 30]
console.log(arr[-1]) // undefined

const arr = [10, 20, 30]
console.log(arr.at(-1)) // 30
…
Read more ⟶

N개의 숫자의 배열 만들기


코딩테스트 중에 숫자 N이 주어졌을 때 N개의 배열을 만들어서 forEach를 하고 싶었다.

그냥 for문이나 while문으로 하면 되겠지만, 배열의 메소드가 익숙해버려서, 해당 방법을 찾기 시작했다.

1중배열 (n개의 배열)

  1. for
function createArray(n) {
  const result = []
  for (let i = 1; i <= n; i++) {
    result.push(i)
  }
  return result
}
  1. while
function createArray(n) {
  const result = []
  let i = 1

  while (i <= n) {
    result.push(i)
    i++
  }

  return result
}
  1. Array.from
//* Recommend
const array = Array.from({ length: n }, (_, i) => i + 1)
  1. Array.map
const array = Array(n)
  .fill()
  .map((_, i) => i + 1)

2중배열로 만들기, ex)[[1], [1,2], [1,2,3], [1,2,3,4], [1,2,3,4,5]]

…
Read more ⟶

useCallback


해당 궁금증을 해소 하기 전 배경에는, useEffect dependency 배열에 함수가 들어가는 상황에 대해서 공부하고 있던 시점이다.

보통 커스텀 훅을 만들 때에는 해당 훅 컴포넌트의 props에 상태 값을 받아오고, 그 상태 값을 useEffect 내부 dependency배열에 넣어 동작을 처리 한다.

그렇다면 함수를 props로 받아올 땐 어떤가? 고민해보았다.

함수가 의존성 배열에 들어가는 이유

리액트 컴포넌트가 렌더링될 때마다 함수는 다시 생성된다.

자바스크립트에서는 함수가 일급 객체이므로, 동일한 이름의 함수라도 매 렌더링 시 새롭게 생성된 함수는 이전 함수와 다르게 취급된다.

…
Read more ⟶