2. 리액트 성능 최적화에 관하여..

컴포넌트 내부에서 생성되는 함수와 객체에 관하여(useCallback, useMemo)

onChange속성 값을보면 Parent()컴포넌트에서 자식컴포넌트인 SelectedFruit컴포넌트에 복잡한 로직이 있는 함수를 내려주고있다. 이런경우SelectedFruit을 memo로 감싸준다고해도 새로운 함수가 계속 생겨나기때문에 불필요한 랜더가 계속 될 수 있다. 이런경우 useCallback을 사용하여 다음과 같이 처리해준다.

const onChangeFruit = useCallback(fruit => {
setSelectedFruit(fruit);
sendLog({ type: "fruit change", value: first });
}, []);

이런식으로 onChangeFruit을 만들어 useCallback함수를 이용해준다. 이 경우 onChangeFruit안에서 상태값이 사용되지 않아서 의존성배열안에 빈배열을 입력했기때문에 한번 생성된 값으로 고정이 된다.

객체를 이런식으로 컴포넌트내부에서 자식에게 전달할시 자식컴포넌트는 속성값이 변경됬다고 인식한다.

함수와 마찬가지로 컴포넌트 내부에서 객체를 정의해서 자식 컴포넌트의 속성값으로 입력하면 객체의 내용이 변경되지않아도, 자식 컴포넌트에서는 속성값이 변경됐다고 인식한다. 이럴경우 따로 컴포넌트 밖으로 빼서 상수변수로 관리해서 입력하면 값이 변하지 않는 값이 된다. 아래 예시.

컴포넌트 밖으로 상수변수를 빼줌.(변하지않는 고정값일시에)

하지만 위와같은 경우외에 또다시 아래와같이 FRUITS에 filter연산을 하게되면 또다시 새로운 배열이 만들어지기때문에 그 값은 랜더링때마다 매번 사로운 값이 된다. 아래 예시

filter연산시 새로운 값을 생성하게되므로 랜더시 변경된 값으로 인식하게된다.

이럴경우 useMemo훅을 이용한다. 아래 useMemo를 보면 maxPrice값이 변경될시에 fruits라는 값이 변경된다.

성능을 최적화 하는 코드는 가독성이 좋지않고 유지보수 비용이 증가하기때문에 처음 코드를 작성할때는 미리 성능 최적화를 염두하고 짜기보다는 작성하고 성능이슈가 발생시 해당하는 부분만 코드 최적화하는것이 좋다.