[React.JS] 리액트Hooks. useCallback, React.Memo

* useCallBack ? 

이전에 선언한 함수에 관하여 재 사용하는 목적을 가지고있다. 컴포넌트가 리 렌더링 될 때, 새로운 함수를 만들지 않으며 기존함수를 재 사용한다.

 

하위 컴포넌트에 프롭스(Props)로 전달된 함수가 바뀌지 않았다면 가상돔(Virtual Dom)에 리 렌더링 되지 않고 이전에 만들었던 결과물을 재 활용한다, 최종적으로 애플리케이션 뷰 최적화 및 성능향상에 목적을 두고 있다.

 

* useCallBack 구조 

첫번째요소: 구현 함수내용.

두번째요소: 첫번째 함수 내 에서 사용되는, 의존요소(Dependency)들에 관한, 선언 부 이다.               

 - 배열로선언 [ props, state... ]

 

* React.Memo ? 

컴포넌트에서 리 렌더링이 불 필요할 때 이전, 렌더링한 결과를 재 활용하는 목적을 가지고 있다.

(컴포넌트에서 렌더링된 결과물을 재 사용)

React.Memo 사용 시 컴포넌트에 전달되는, 프롭스(Props)가 바뀌었을때만 리 렌더링 한다.

 

---

useMemo 연습하기

 

 

 

1. App.js 컴포넌트 수정

Step1. react로 부터 useCallBack 함수 Import..

 

Step2. 기존 만들어진, onChange, onCreate, onRemove, onToggle 함수에 useCallBack적용.

 

  첫번째요소: 기존선언된 함수

      --> (params) => { function Execute Body..   }

  두번째요소: 첫번째 함수 내 에서 사용되는, 의존요소(Dependency)들에 관한, 선언 부 이다.             

 - 배열로선언 [ props, state... ]

 

 

* useCallBack 적용함수 각, 의존요소(Depencency) 

 onChange  : inputs 

 onCreate : goodsname, price, goodLi  

 onRemove : goodLi 

 onToggle : goodLi  

--> 의존요소들의 변화에 따라 useCallback이 적용된 함수가 새로 만들어 지는 것이다.

    

 

* useCallBack 적용함수 각, 의존요소(Depencency) 특성 

-->   두번째 의존 선언요소가 함수형 업데이트로 관리시, Deps 선언을 제외 할 수 있다. 

 

------- Dependency선언 Case1 

const onRemove = useCallback(id => {

 

    // 함수형 업데이트 사용X , 일반 Setter.

    // useCallback 두번째파라미터 의존요소로 GoodLi 선언

    setGoodLi(goodLi.filter(goods => goods.id !== id));  

}, [goodLi]);   

 

------- Dependency선언 Case2 

const onRemove = useCallback(id => {

 

    // 함수형 업데이트 사용O

    // 함수형 업데이트는 Callback(콜백)의 결과로 업데이트 된, 최신의 값을 가리킨다. 

    setGoodLi(goodLi => goodLi.filter(goods => goods.id !== id));

}, []);

 

 

 

* 함수형 컴포넌트 App() 에 프롭스(Props)로 전달 받은 값이 있다면 useCallBack으로 적용된 함수의

두번째 인자 Deps배열에 포함해야 한다.

 

cf.

 

function App({ data1 }) {

        ...

        // useCallback 적용 (첫번째 함수내용, 두번째 의존요소)

       const testFn = useCallback(() => {
              console.log('testFn Call..');
       }, [data1])

}

 

 

---

 

React.Memo 적용하기

 

 

1. GoodList.js 컴포넌트 수정

* Good, GoodList 컴포넌트 자체에 React.memo 적용 

 --> Props가 변할시에만 컴포넌트 리 렌더링..

 

  -- React.memo구조 

    첫번째요소: 함수형 컴포넌트 

    두번째요소: CallBack Function 

                   -->  (이전Props, 현재Props) => "두 파라미터 값으로 리 랜더링 여부 로직작성"

                         Return Boolean (True: 리 렌더링X, False: 리 렌더링 O)