본문 바로가기

팀프로젝트_기록일지/React_이정환_React내부최적화2

(11).이정환_react.js강의_컴포넌트 중 불필요한 재렌더링방지 =>React.memo() , 불필요한 함수 재생성 => useCallback() 개발자 도구창을 열고, 한 item항목의 checkBox 클릭으 반복적으로 하면, 어떤 부분이 재랜더링 되고있는 지를 알 수 있다.아래의 사진은 checkBox를 계속 누를 시, 모든 컴포넌트에서 재랜더링이 되고 있다는 것을 알 수 있다. // 불필요한 재랜더링이 발생 중이다.○ 목표 : 특정 item의 isDone을 checkBox로 반복적으로 변경 시,- Header가 재랜더링 되지 않도록 막기- 바뀌는 특정 item만 재랜더링되고, 나머지 item들은 재랜더링이 되지 않도록 셋팅해보기1_ Header 컴포넌트의 재랜더링 막기 :- 순서1_ import로 memo 메소드 라이브러리 등록- 순서2_ export default 에 컴포넌트를 memo(Header)로 변경- Header.jsimport ".. 2025. 1. 18.
(11).이정환_react.js강의_최적화의 종류와 React 내부의 최적화 ● React에서 최적화의 종류 :○ 웹서비스에 대한 최적화 종류 :○ React 내부의 최적화 종류 :● React에서 최적화의 종류1 "연산 방지"에 대한 최적화 React Hook : useMemo연산 방지에 대한 상황 :예를 들어, todoList프로젝트에서, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 uncheck 된 item 개수 출력되도록 할떄, 이것을 렌더링 할때마다, item들을 집계하면서, 계속 계산하면, 좆같으므로, 랜더링 하면서 , 업데이트된 개수들만 계산하는 기법을 useMemo를 말한다.1_ 실습 준비 :일단 List 컴포넌트 자리에, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 unche.. 2025. 1. 17.

티스토리툴바