React 기초 학습 18.ContextAPI__성능최적화(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

성능최적화

구글확장플러그인 devtools로 확인하여 테스트한 후에 최적화가 필요하면 진행한다.

최적화작업은 작업의 마지막에 한다.

 

useEffect와 useRef로 재렌더링이 되는 이유를 디버깅할 수 있는 방법이 있다.

ref를 만들어서 props나 state들을 넣고 비교하면서 검사하면된다,

import React, {useCallback, useEffect, useRef}from 'react';

const Test = () => {
    const Ref = uesRef([]);

    useEffect(() =>{
    
    	// 콘솔에 찍어보자
        console.log(a === ref.current[0], a === ref.current[1]);
        ref.cuffrent = [a, b, c, d];
        
    // a, b, c, d가 변경될때 useEffect가 실행
    },[ a, b, c, d ]);

}

 

React.memo는 컴포넌트를 기억할 수 있다.

컴포넌트자체를 기억시킬수 있다.

return(
    <>
        useMemo(() => <Test />, [ data[i] ]);
    </>
);

 

근데 이 전에 memo를 먼저 진행해보고 안되면 useMemo를 쓴다.

import React, {memo} from 'react'l

const Test = memo(() => {
    // .... 
});

자식 컴포넌트부터 진행하여 위로 올라오면서 확인하는것이 더 쉽다.

useMemo는 memo를 쓰고도 재렌더링이 될때 최후의 수단으로 쓸 수 있다.(이건 추후에 다시 공부)

 

contextAPI

useReducer는 redux에서 차용했으며 state가 여러개일때 하나로 관리하고 dispatch의 action을 통해 state를 변경할 수 있따. redux와의 차이점은 동기이나 비동기이냐의 차이이다.

react와 useReducer는 비동기이며 redux는 동기이다.

 

부모컴포넌트가 자식컴포넌트에게 props를 전달할때, 다중 관계를 해결하기 위해 contextAPI를 사용한다.

return(
    <>
        <Text dispatch={dispatch}/>
    </>   
)

이렇게 dispatch를 props로 내려주는 부분을 contextAPI를 통해 바로 접근할 수 있도록 해준다.

 

createContext Provider

contextAPI에 접근하고 싶은 컴포넌트들을 provider에 감싸주면된다.

import React, { createContext } from 'react';

const TestContext = creatContext({
    // 여기에 기본 값을 넣을 수 있다.
});

import React, { createContext } from 'react';

const TableContext= creatContext({
    // 여기에 초기값을 넣어야한다.
    tableData : [],
    dispatch : () => {}
    // 초기값에 의미가 없어서 데이터형태만 넣어줬다.
});

const Test = () => {
    return (
        <TextContext.Provider>
            <Test />
        </TextContext.Provider>
    );
};

 

데이터는 value에 넣어준다.

value는 자식컴포넌트에서 바로 접근할 데이터들이며 가져올때에는 useContext를 사용한다.

return (
        <TextContext.Provider value={{ tableData : state.tableData, dispatch:dispatch }}>
            <Test />
        </TextContext.Provider>
);

// 자식
import React, { useContext } from 'react';
import { TableContext } from './createContext한 컴포넌트';

const Test = () => {    
    const value = useContext(TableContext);

    // tableContext는 createContext한 것이고 
}

// 부모
export const TableContext= creatContext({
    // 여기에 초기값을 넣어야한다.
    tableData : [],
    dispatch : () => {}
    // 초기값에 의미가 없어서 데이터형태만 넣어줬다.
});

이렇게 해두면 value.dispatch로 접근할 수 있다.

const Test = () => {    
    const value = useContext(TableContext);
    
	// 구조분해해도된다
    const { dispatch } = useContext(TableContext);

 

contextAPI가 성능최적화에서 가장 힘들다.

아래처럼 쓰면 컴포넌트가 재렌더링이 될때마다 value 객체가 새로 재렌더링이 되는데, 이럴경우 성능에 문제가 생길수 있어서 캐싱을 해줘야한다.

useMemo를 사용해준다.

참고로 dispatch는 항상 안바뀌고 유지가되므로 2번째 인자로 전달하지 않아도 된다.

return (
        <TextContext.Provider value={{ tableData : state.tableData, dispatch:dispatch }}>
            <Test />
        </TextContext.Provider>
);

import React, { useMemo } from 'react';

conts Test = () => {
    const value = useMemo (() => {
        tableData : state.tableData, dispatch:dispatch
    },[ state.tableData ]);

    return (
        <TextContext.Provider value={value}>
            <Test />
        </TextContext.Provider>
    );
};

dispatch({ action을 생성하면된다 });

 

contextAPI를 쓰려면 value가 다 바뀌게된다.(재렌더링)따라서 value를 useMemo로 감싸준다.

memo를 쓰려면 하위컴포넌트 모두에게 적용해야한다.

const value = useMemo (() => {
        tableData : state.tableData, dispatch:dispatch
},[ state.tableData ]);