react ( Udemy강의 ) - 4. React 최적화

React - Behind the Scenes

How React Works

 

리엑트는 state, props, context가 변한 컴포넌트와 자식 컴포넌트를 리랜더링 시킨다.

 

클로저에 관한 공식문서

: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

React.memo

: 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전달, 그리고 props의 값이 바뀐 경우에만 컴포넌트를 재실행 및 재평가

export default React.memo(DemoOutput);

 

useCallback 훅

: 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅

  함수 재생성을 막음

const toggleParagraphHandler = useCallback(()=>{}, [])

// 첫번째 인자 : 함수
// 두번째 인자 : 의존성

-> 콜백 함수는 절대 변경되지 않을 것이라고 리액트에 알려주는 배열이다.

    따라서 App컴포넌트가 다시 렌더링되어도 항상 같은 함수 객체가 사용되게끔 한다.

 

 

* useState, useReducer는 최초의 초기화 이후 갱신만 됨.

  set함수는 상태 갱신 예약

    동시에 여러 번의 갱신이 스케줄될수도 있기에 상태를 갱신할때는 함수 형태를 이용해서 갱신할 것

    특히 이전 상태의 스냅샷에 의존해야한다면!

    ( 이론상은 이 스케줄링 작업은 지연될 수 있기에 가장 최신의 상태를 얻게해주는 안전한 방법 )

setShowParagraph((prevShowParagraph) => !prevShowParagraph);

 

App 컴포넌트의 재 렌더링 주기는 모두 동일

- 모두 최종 컴포넌트 스냅샷으로부터 발생하지만 당연히 변경작업이 처리된 경우에는 컴포넌트는 중간에 다시 랜더링

- 변경작업들은 이미 예약이 되어있으므로 완료되지 않은 상태 변경 작업은 새로운 컴포넌트의 결과를 고려하지 않게 됨

- 함수 형태를 사용해야 리액트가 미완료된 상태 변경 작업에 대하여 최신의 상태를 사용하고 컴포넌트가 재 렌더링되었을 그 시점의 상태를 사용x

 

useMemo 훅

: 모든 종류의 데이터를 저장

const listItems = useMemo(() => [5,3,1,10,9], []);
return <DemoList items={listItems} />
-----------------------------------------
const {items} = props;

const sortedList = useMemo(()=> {
	return items.sort((a,b) => a-b);
},[items]);

// 첫번째 인자 : 함수
// 두번째 인자 : 의존성 배열

: items에 변경사항이 발생할 떄만 리빌드를 진행