도슐랭스타

useMemo()복잡한 계산 결과를 기억(memoization) 해서, 불필요한 계산을 피하고 성능을 향상시키는 Hook Memoization (메모이제이션)- 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 -> 성능 최적화 - 메모이제이션 된 결과값이 Memoized value계산량이 많은 작업(compute함수)의 경우 컴포넌트가 랜더링될 때마다 수행하면 UI 지연 발생-> useMemo() 훅이 필요렌더링이 일어나는 동안 실행되서는 안되는 작업은 useMemo()에 사용하면 안됨 - useEffect()에서 실행돼야 할 이펙트 작업임. 1. 의존성 배열을 넣지 않으면? const..

const [count, setCount] = useState(0);function handleClick() { setCount(count + 1); setCount(count + 1);}두 번 더했으니까 count는 2가 되겠지?" 하고 생각할 수 있지만 실제로는 count가 1만 됨.count는 현재 렌더링 시점의 값(0) 이고, setCount(count + 1)은 두 번 다 setCount(1)이 되기 때문.-> setCount(1)처럼 상태를 바꾸면, 바로 즉시 count 값이 1로 바뀌는 게 아님 set 함수는 비동기적으로 작동하며 현재 렌더링된 시점의 값이 반영됨 해결 방법함수형 업데이트를 쓰기const [count, setCount] = useState(0);function handl..

State컴포넌트의 상태state 값이 변경될 경우 컴포넌트도 재렌더링이 됨.state는 컴포넌트를 개발하는 개발자가 직접 정의함.주의사항렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함.→ 데이터 흐름에 상관없는 경우 불필요한 렌더링 발생으로 성능이 저하됨.특징state는 직접적인 변경이 불가능함.변경할 때는 반드시 setState() 함수나 개별 set함수를 이용해야 함.import React, { useState } from 'react';function Counter() { // useState를 사용하여 count라는 상태와 이를 갱신할 수 있는 setCount 함수를 선언 const [count, setCount] = useState(0); return ( ..