개발일지

📌 useCallback란?useCallback은 리렌더링 사이에 함수 정의를 캐시 할 수 있게 해주는 React훅입니다.const cachedFn = useCallback(fn, dependencies) 📌 useCallback최상위 컴포넌트에서 useCallback을 호출하려 리렌더링 사이에 함수 정의를 캐시 합니다:import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referre..

📌 useMemo란?useMemo는 리렌더링 사이의 계산 결과를 캐시 할 수 있는 React훅입니다.const cachedValue = useMemo(calculateValue, dependencies) 📌 useMemo컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시 합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 📍매개변수calculateValue: 캐시 하려는 값을 계산하는 함수입니다. 이 함수는 순수함수여야 하며, 인자..

useEffect란?리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다.주요 기능1. 컴포넌트가 마운트 될 때와 업데이트될 때 작업을 수행합니다.2. 컴포넌트가 언마운트될 때 정리 작업을 수행합니다.사용방법import { useEffect } from 'react';컴포넌트의 최상위 레벨에서 useEffect를 선업 합니다. 매개변수useEffect (function, dependencies)- function: 수행하고자 하는 작업.- 선택적dependencies:  배열의 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 useEffect(() => { // 여기에 부수 효과를 수행하는 코드를 작성합니다. console.log('컴포넌트가 마운..

📌 useLayoutEffect란?useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다.useLayoutEffect(setup, dependencies?)📌 useLayoutEffect브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정합니다:import { useState, useRef, useLayoutEffect } from 'react';function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); useLayoutEffect(() => { const { height } = r..