Frontend/React 2

"React useMemo" : 메모이제이션을 통한 성능 최적화

1. 소개React 앱을 개발하면서 성능 최적화는 항상 고려해야 할 중요한 측면임. 이때 useMemo 훅은 메모이제이션을 통해 성능을 향상시킬 수 있는 강력한 Hook임이번 글에서는 React의 useMemo 훅에 대해 알아보고, 그 특징과 장점에 대해 시작해보겠음2. 특징메모이제이션: useMemo 훅은 이전에 계산된 값을 기억하여 동일한 계산을 반복하지 않고 이전에 계산된 값을 재사용하고,  이를 통해 불필요한 계산을 방지하여 성능을 향상시킴의존성 배열: useMemo 훅은 두 번째 매개변수로 의존성 배열을 받고, 이 배열에 포함된 값들이 변경될 때에만 메모이제이션된 값이 다시 계산됨3. 장점성능 향상: useMemo를 사용하면 렌더링 시간을 줄일 수 있음! 특히 계산 비용이 높거나 자주 변경되지 ..

Frontend/React 2024.02.08

"React에서의 상태 관리" : Custom Hook vs. Context API

1. 소개 React에서 상태 관리는 애플리케이션의 복잡성과 효율성을 결정짓는 중요한 요소임. 이 중에서도 React Custom Hook과 Context API는 각각의 특징과 사용 방법으로 효과적인 상태 관리를 가능하게함. 2. Custom Hook: 로직과 상태 재사용 Custom Hook은 주로 특정 컴포넌트 또는 컴포넌트 그룹의 상태와 관련 로직을 재사용하기 위한 도구임. 이를 통해 컴포넌트의 로직을 추상화하고 독립적으로 만들 수 있으며, 이를 다른 컴포넌트에서 재사용할 수 있게됨. 이는 "지역 상태"를 관리하는 데 효과적일 수 있지만, 그것이 지역 상태 관리만을 위한 것은 아님! 3. Context API: 상태 공유와 prop drilling 해결 Context API는 애플리케이션 전반에 ..

Frontend/React 2024.02.04