개발지식소

  • 홈
  • 블로그 소개
  • 백엔드
  • 프론트엔드
  • 개발도구 & 환경

useState 1

React 기본 Hook 성능까지 끌어올리는 사용법

React의 기본 Hook(useState, useEffect, useRef, useContext)은 “상태를 쓴다/부수효과를 관리한다”로 끝나지 않습니다. 언제, 어떻게 쓰느냐에 따라 렌더 횟수, 불필요한 네트워크 호출, 이벤트 리스너 누수까지 좌우됩니다. 아래는 개념 + 실전 성능 팁을 한 번에 정리한 가이드입니다.1) useState — 초기화·업데이트만 잘해도 빨라진다개념 요약컴포넌트 로컬 상태를 선언하고 업데이트합니다. 업데이트가 일어나면 컴포넌트는 다시 렌더됩니다.성능 팁 1: Lazy 초기화로 무거운 계산 1회로 제한// ❌ 매 렌더마다 heavy() 실행됨const [list, setList] = useState(heavy());// ✅ 최초 마운트 시에만 heavy() 실행const [l..

프론트엔드 2025.08.22
이전
1
다음
더보기
프로필사진

개발지식소

하루하루 채워가는 개발지식, 복잡한 개념도 쉽고 따뜻하게 설명하는 곳. 초보자도, 현업자도 함께 성장하는 지식 채움의 공간

  • 분류 전체보기 (26)
    • 프로그래밍언어 (4)
    • 프론트엔드 (7)
    • 백엔드 (13)
    • 개발도구 & 환경 (2)

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

방문자수Total

  • Today :
  • Yesterday :
Privacy Policy

Copyright © Kakao Corp. All rights reserved.

티스토리툴바