728x90 반응형 useEffect2 [React] 리액트 훅 - useMemo, useCallback(메모이제이션 값, 함수 반환) 📌 useMemo, useCallback 훅useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.useMemo 계산된 값을 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 계산합니다. useCallback 함수를 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 함수를 생성합니다.useMemo(() => 함수, 의존성 배열);useCallback (함수, 의존성 배열);🤔 리렌더링(re-rendering)React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준.. 2024. 8. 30. [React] 리액트 훅 - useEffect(조건부 실행, 자원 정리) 📌 useEffect 훅리액트 컴포넌트가 렌더링된 후에 비동기적으로 특정 작업을 처리하는 리액트 훅입니다.컴포넌트가 mount, update, unmount '될 때' 실행된다.useEffect 훅은 컴포넌트의 렌더링과 동시에 실행되지 않고, 렌더링이 완료된 후에 작업을 수행합니다.🤔 생명주기(Lifecycle)생명주기는 컴포넌트가 다음과 같은 단계들을 거치는 것을 의미Mounting (마운트) : 컴포넌트가 처음으로 DOM 화면에 추가되는 시점Updating (업데이트) : 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링 되는 시점Unmounting (언마운트) : 컴포넌트가 DOM 화면에서 제거되는 시점 🤔 클래스형 컴포넌트의 생명주기 메서드클래스형 컴포넌트에서는 다음과 .. 2024. 8. 30. 이전 1 다음 728x90 반응형
