React - 성능개선 함수들

react에서 성능개선 할 수 있는 함수가 있다.
그 중에서 useMemo, useCallback, React.memo, useReducer 4가지의 대해서 공부를 하였다.

1. useMemo

useMemo는 전에 계산 한 값을 재사용한다는 의미로 사용되는 react hook 이다.

useMemo의 첫번째 피라미터는 어떻게 연산할지 정의하는 함수를 입력하고, 두번째 파라미터에는 deps 배열을 넣어주면 된다.

장점으로는 성능은 최적화되서 사용할 수 있고,
단점으로는 잘못 만들면 화면이 갱신이 안될 수 있어서 주의 해야한다.

   const count =useMemo( () => countClickUsers(users), [users]);

2. useCallback

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

useCallback을 사용할때 주의해야할점이 있는데, 함수안에 사용하는 것있다면 defs안에다가 사용하는 값을 넣어야한다는 점이다.

 const onRemove = useCallback( id => {
    setUsers(users.filter(user => user.id !== id));
  }, [users]);

여기 코드처럼 users를 다시 사용하고 싶어서 갱신하는 것 이므로 [users]를 넣어준다.

3. React.memo

React.memo는 성능최적화를 위한 함수로 React안에 있는 기능이다.
컴포넌트 단위로 랜더링을 방지하는 것으로 서로 참조하지 않게 만드는 것이다.

컴포넌트의 props가 바뀌지 않았다면, 리랜더링을 방지하여 컴퍼넌트의 리렌더링 성능 최적화를 해줄 수 있다. 이 함수를 사용하면 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정한다.

이를 적용하는 방법은 export 할 때 감싸주는 것이다.
예로 들면 Practice.js파일이라고 가정할때

export default React.memo(Practice);

이런식으로 사용한다.

4. useReducer

useReducer은 분리해서 재활용해서 다른 것과 같이 사용할 수 있도록 하는 react hook이다.

컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
상태 업데이트 로직을 컴포넌트 외부에 작성 할 수도 있고, 다른 파일에 작성 후 불러와서 사용할 수 있다.

여기에서 useReducer과 함께 사용되는 함수로는 dsipatch가 있다.

dispatch란 action을 발생시키는 함수이다.

코드를 예로 들면

function reducer(state, action){
    switch(action.type){
        case 'PLUS':
            return state +1;
        case 'MINUS':
            return state -1;
        default:
            return state;
    }
}

function Counter(){

    const [number, dispatch] = useReducer(reducer, 0); 

    const plus = () => {
        console.log('1을 더한다.');

        dispatch({type : 'PLUS'});
    }
    const minus = () => {
        console.log('1을 뺀다.');
        dispatch({type : 'MINUS'});
    }

이렇게 사용할 수 있다.