Hun's Blog ✍️

리액트에서의 클로저


클로저는 자바스크립트에서 기본이 되는 아주 중요한 개념이다.

기술 면접에서 1순위로 자주 물어보는 개념이기 때문에, 나도 기술 면접을 준비하며 외웠던 기억이 난다.

하지만, 실무에서 클로저가 어떻게 쓰이는지 잘 이해하지 못했고, 이를 실제로 어떻게 응용해야 할지 고민하던 시기가 있었다. 이번에 클로저 개념을 더 심도 있게 공부해보려 한다.

문제

customHook에 함수를 파라미터로 넘겨줄 때, useCustom 컴포넌트가 언마운트되는 상황에서 해당 함수가 실행될 때, 함수 내부의 state 값이 어떻게 출력되는지 살펴보자.

import useCustom from './hooks/useCustom'
import { useState } from 'react'

export default function Home() {
  const [state, setState] = useState(0)

  useCustom(() => console.log('inner func state:', state))

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <div>{state}</div>
      <button onClick={() => setState(state + 1)}>+</button>
    </div>
  )
}

import React, { useEffect } from 'react'

const useCustom = (func: Function, state: any) => {
  console.log('params state:', state)
  useEffect(() => {
    return () => func()
  }, [])

  return <div>useCustom</div>
}

export default useCustom

코드 설명

…
Read more ⟶

Set을 사용하는 배열


Set의 사용

일반 배열을 사용한 방식의 차이는 중복된 요소를 어떻게 처리하는가이다.

let setArr = new Set(['a','b','c','d','a'])

console.log(setArr)
// 출력: Set(4) { 'a', 'b', 'c', 'd' }
  • Set은 중복을 허용하지 않는 데이터 구조이다.
  • 즉, Set에 같은 값을 여러 번 추가하려고 해도, 중복된 값은 하나만 유지된다.
  • Set을 배열로 변환하려면 Array.from()을 사용 할 수 있다.
let report = ["muzi frodo", "apeach frodo", "frodo neo", "muzi neo", "muzi frodo"];
let uniqueReports = new Set(report);

console.log(uniqueReports); 
// 출력: Set(4) { 'muzi frodo', 'apeach frodo', 'frodo neo', 'muzi neo' }

Set의 특징

…
Read more ⟶

순열(Permutation)


순열은 고등학교 수학 때 배우는 개념이다.

그때는 무작정 공식만 외웠기 때문에, 순열이 무엇인지, 언제 쓰이는지 몰랐다.(어릴때 공부를 잘못했던 이유인듯 …)

순열이란?

순열(Permutation)은 집합에 속한 모든 원소의 순서를 고려하여 배열하는 것을 의미합니다.

즉, 주어진 n개의 원소를 모두 사용하여 만들 수 있는 가능한 모든 순서의 조합을 말합니다.

순열의 특징

  • 순열은 순서가 중요합니다. 즉, {1, 2, 3}과 {3, 2, 1}은 서로 다른 순열로 취급됩니다.
  • n개의 원소로 만들 수 있는 순열의 개수는 n! (n 팩토리얼)로 계산됩니다. 예를 들어, 3개의 원소가 있을 때 순열의 개수는 3! = 3 × 2 × 1 = 6개입니다.

순열의 활용

…
Read more ⟶