useCallback2 리액트 성능최적화 하기 - useMemo, useCallback 리액트의 컴포넌트는 이제 class 보다는 function 형을 사용할 것을 권장하고 있습니다.함수형으로 사용은 hook 의 역할이 커지면서 효용성이 더 커지게 되었으나 단점으로는 함수가 실행될 때마다 rendering이 다시 발생되어 메모리를 비효률적으로 사용하게 됩니다. 이를 방지하기 위해 사용하는 hook 이 useMemo, useCallback 입니다.어떤 경우에 어떻게 사용하면 되는지 예를들어 알아 보겠습니다. 1. useMemo계산된 값을 메모이제이션(Memoization) 하는데 사용주요 사용 예시 : 복잡한 계산이 필요한 경우, 렌더링 성능을 최적화해야 할 때 사용import React, { useMemo } from 'react';function ExpensiveComponent({ d.. 2024. 11. 17. 리액트로 뉴스뷰어 만들어 보기(3) 뉴스 카테고리는 총 6개 입니다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(과학) API 카테고리는 영어로 되어 있어 카테고리 이름을 한글로 보여준 뒤 클릭시 영어로된 카테고리 값을 사용하도록 구현합니다. import styled from 'styled-components'; const categories = [ { name: 'all', text: '전체보기' }, { name: 'business', text: '비즈니스' }, { name: 'entertainment', text: '연예' }, { name: 'health', text: '건강' }, { name: 'science', text: '과학.. 2023. 6. 6. 이전 1 다음 반응형
