14. (4)context API

최적화

context API 의 Provider 에 value를 넣어줄때 useMemo 

useMemo를 안해주면 value가 바뀔때마다

Provider안에 있는 컴포넌트들이 다 리렌더링 되버림.

const tblContextValue = useMemo( ()=>({ tableData, dispatch , gameOver }) ,[tableData]);

<TableContext.Provider value={tblContextValue}>
            <h3>지뢰찾기</h3>
            <Form />
            <Table />
            <p>타이머:{timer}</p>
            <p>결과:{result}</p>
</TableContext.Provider>

 

 

 

Form, Table, Tr, Td 하위컴포넌트의 경우 React.memo 사용

 

 

 

jsx의 useMemo

contextAPI를 쓰면 기본적으로

state가 바뀔때마다

useContext 를 쓴 함수컴포넌트가 한번리렌더링 된다

const Td = memo(({trIndex, tdIndex}) =>{
    const{ tableData , dispatch , gameOver } = useContext(TableContext);
    ...
    //이부분들이
}

 

const Td = memo(({trIndex, tdIndex}) =>{
    const{ tableData , dispatch , gameOver } = useContext(TableContext);
    ...
    
    // A
    
    return(
    	//B
    )
}

함수부분인 A에 비해 렌더링하는 B 부분은 최적화작업이 필요.

실제로 렌더링 되는 return안은 값을 캐싱하는 useMemo를 사용한다

const Td = memo(({trIndex, tdIndex}) =>{
    const{ tableData , dispatch , gameOver } = useContext(TableContext);
    ...
    
    // A
     
    return useMemo( ()=>(
        <td onClick={onClickTd} onContextMenu={onClick_RightTd} style={tdStyle(stateCode)}>
            {tdText(stateCode)}
        </td>
    ),[stateCode]);
}

 

+컴포넌트분리

const Td = memo(({trIndex, tdIndex}) =>{
  	...
	return <TdStr onClickTd={onClickTd} onClick_RightTd={onClick_RightTd} stateCode={stateCode}/>;
});

const TdStr = memo(({onClickTd, onClick_RightTd, stateCode} )=>{
    return(
        <td onClick={onClickTd} onContextMenu={onClick_RightTd} style={tdStyle(stateCode)}>
            {tdText(stateCode)}
        </td>
    )
});