useCallback 사용해보기 + uuid 사용해보기[자신감up 실습12]

useCallback

 

메모이제이션된 콜백: useCallback은 메모리에 함수를 저장하고, 의존성 배열(dependency array)에 있는 값이 변경될 때만 함수를 다시 생성합니다. 그렇지 않은 경우, 이전에 저장된 함수를 재사용합니다.

 

-예시-

Month 말고 다른 mode라는 set함수 변경시에도 '데이터 받아오기' 콘솔 출력이 반복되어,

month라는 useState 변수만 변할 때에, 함수가 실행되도록 함.

 const getResults = useCallback(() => {

    if (month === 1) return [200, 300, 500];

    if (month === 2) return [400, 400, 800];

    if (month === 3) return [450, 450, 900];

    return [0, 0, 0];

  }, [month]);

 

---

uuid 

uuid를 통해서 key props 값을 기입하여 key 콘솔에러를 없앤 코드이다.

import React, { useEffect, useState } from "react";

import { v4 as uuidv4 } from "uuid";

function DataSheets({ getResults }) {

  const [results, setResults] = useState([]);

  useEffect(() => {

    setResults(getResults());

    console.log("데이터 받아오기. downloading data");

  }, [getResults]);

  return results.map((result) => <div key={uuidv4()}>{result}</div>);

}

export default DataSheets;

 

---

1. Install

npm install uuid

2. Create a UUID (ES6 module syntax)

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

 

https://www.npmjs.com/package/uuid

uuid

---

 

UUID (Universally Unique Identifier)는 전 세계적으로 고유한 식별자입니다. 이는 128비트 길이의 숫자이며, 네트워크 상에서 서로 다른 객체나 정보를 식별하는 데 사용됩니다. UUID의 목적은 정보의 고유성을 보장하는 것이며, 이를 통해 중복되는 식별자 없이 객체를 구별할 수 있습니다.

UUID의 특징

1. 고유성: UUID는 매우 큰 값의 범위를 가지고 있으며, 임의성 또는 특정 규칙에 따라 생성되므로, 고유성이 거의 보장됩니다.
2. 범용성: UUID는 다양한 시스템과 환경에서 사용될 수 있습니다.
3. 표준화: UUID 형식과 생성 방법은 RFC 4122 및 기타 표준에서 정의되어 있습니다.

UUID의 구조

UUID는 32개의 16진수로 구성되며, 일반적으로 다음과 같은 형태를 가집니다: 123e4567-e89b-12d3-a456-426614174000. 이 숫자들은 하이픈(-)으로 구분되며, 특정 부분은 UUID의 버전과 변형을 나타냅니다.