lyuna's story

useCallback이란? useCallback은 React에서 성능 최적화를 위해 사용하는 훅으로 , 메모이제이션(memoization)된 콜백 함수를 반환하는 역할을 한다.즉, 함수의 재사용을 도와 불필요한 함수 재생성을 방지한다.레퍼런스 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { refer..

다른 Hook 의 종속성 메모화 컴포넌트 본문에서 직접 생성된 객체에 의존하는 연산이 있다고 가정하자.function Dropdown({ allItems, text }) { const searchOptions = { matchMode: 'whole-word', text }; const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); }, [allItems, searchOptions]); // 🚩 주의: 컴포넌트 본문에서 생성된 객체에 대한 종속성 // ... 이렇게 객체에 의존하는 것은 메모이제이션의 목적을 무색하게한다. 컴포넌트가 다시 렌더링 되면 컴포넌트 본문 내부의 모든 코드가 다시 실행되기 때문이..

Tailwindcss 사용 2일차 응애인 나는 아직도 적응하는데 넘 오래걸림,, 팀 프로젝트 진행중에 피그마에서 같이 정한 색이Tailwindcss의 기본색으로 대체할 수가 없어서색을 추가할 수가 있는지이것저것 검색해보고 있었음 근데 웬걸 방법 레전드로 쉽다! tailwind.config.js파일 안에 export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { colors: { customPurple: '#D9B8FF', customBlue: '#80CAFF', bgDev: '#FFFFF0' } } },  theme 객체 안에 ..