Daily log

useCallback : 「2」건

  1. React 성능 최적화 기법
    2026.02.26
  2. React - useCallback을 활용한 함수 최적화 전략
    2025.06.07

React 성능 최적화 기법

React 애플리케이션 성능을 끌어올리는 다양한 방법들을 살펴보고, 실제 적용 사례를 통해 꿀팁을 얻어보자!왜 React 성능 최적화가 중요할까?React는 정말 강력한 프론트엔드 라이브러리인데요, 사용하기도 쉽고 컴포넌트 기반이라 개발 생산성도 높여주죠. 하지만 프로젝트 규모가 커지거나 복잡한 UI를 다루게 되면 성능 문제가 발목을 잡을 때가 있더라고요. 사용자 경험(UX)은 당연히 떨어지고, 심하면 앱이 멈추는 현상까지 발생할 수 있어요.① 느린 렌더링, 답답한 사용자 경험React는 기본적으로 가상 DOM을 사용해서 DOM 업데이트를 효율적으로 처리하지만, 모든 컴포넌트가 불필요하게 리렌더링되면 성능 저하가 발생할 수 있어요. 예를 들어, 부모 컴포넌트의 state가 변경되면 자식 컴포넌트까지 모두..
개발/React 2026. 2. 26. 09:02

React - useCallback을 활용한 함수 최적화 전략

React 컴포넌트에서 함수를 props로 자식 컴포넌트에 전달하는 경우, 불필요한 함수 재생성으로 인해 자식 컴포넌트가 매번 리렌더링되는 문제가 발생할 수 있다. 특히 React.memo와 함께 사용할 때 이 문제가 더욱 두드러진다. 이를 방지하고 성능을 개선하기 위해 useCallback을 활용한 최적화가 필요하다.이번 글에서는 useCallback을 적용해 함수 재생성을 방지하고 렌더링 최적화를 이룬 사례를 소개한다.문제 상황아래와 같이 작성된 코드에서, onCreate, onUpdate, onDelete 함수는 컴포넌트가 렌더링될 때마다 새로 정의된다.const onCreate = (content) => { dispatch({ type: "CREATE", data: { ... }, ..
개발/React 2025. 6. 7. 01:12
◀ 1 ▶

티스토리툴바