16. 렌더링 속도를 올리기 위한 최적화 방법.

리액트 렌더링 과정

component(data)-> 가상돔과 비교-> 실제 돔에 반영

리액트가 실행될때 가장많은 CPU자원을 사용하는것이 렌더링

리액트는 데이터와 컴포넌트 함수로 화면을 그림.

그 과정에서 대부분의 연산은 컴포넌트의 실행과 가상돔에서 발생.

데이터는 컴포넌트의 속성값,상태값을 말함

속성,상태값이 변경되면 리액트가 자동으로 컴포넌트를 이용해 화면을 다시 그림.

리액트 memo함수를 사용하면됨-> 속성값의 변경사항이 없으면 이전 렌더링 결과를 재사용할 수 있다.

렌더링 속도를 개선하기 위해 각 단계에서 할 수 있는 일은?

평상시에는 성능 최적화를 고민하지 말고 편하게 작업하면됨. 성능이슈가 생겼을때 그때 고민하길!

 

1. 리액트 불변객체로의 속성값 비교

2.gist.github.com/ninanung/767ca722befa8b0affe51ffa0064296b

때늦은 React Hooks 시리즈 4탄 - useCallback/useRef

useMemo는 숫자, 문자열, 객체등의 일반적인 값에 사용하고, useCallback은 함수에 사용하면 됩니다

useRef의 사용법은 하나가 더 있습니다. 클래스형 컴포넌트의 로컬변수 선언을 useRef를 사용하여 함수형 컴포넌트에서도 할 수 있다는 겁니다

 

useCallback

useMemo-> 다시 실행되지 않고 기억될 수 있게 해준다.

항상 useEffect,useMemo,useCallback까지 두번째 인자가 있다.

두번째 인자가 바뀌지 않는한 다시 실행되지 않음./ 두번째 배열의 요소가 바뀌면 다시 실행됨

 

useMemo :복잡한 함수 결괏값을 기억/ 간단하게 함수의 리턴값을 기억한다고 생각한다.

useRef:일반 값을 기억

hooks는 함수 컴포넌트전체가 재 실행되어서 비효율적이 되어서 useMemo등으로 기억해둔다.

 

초보 추천: 함수안에 console.log하나씩 다 넣어보고 필요할때 실행이 되는지 확인해본다.

 

useCallback: 함수 자체를 기억한다

함수 생성자체가 오래걸리고 비용이 크다면 함수자체를 기억해둬서 그 함수를 이벤트에 넣으면 됨.

useCallback에서 쓰이는 state는 항상 두번째 인자에 넣어줘야함.

그래야지만 useCallback도 바뀜

 

가성돔과 비교해서 실제돔에 반영할때 성능을 최적화하는 방법