**React.memo**는 React에서 제공하는 고차 컴포넌트(Higher-Order Component, HOC)로, 주로 함수형 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용됩니다. 이 컴포넌트는 props가 변경되지 않았다면 컴포넌트의 리렌더링을 건너뛰어 성능을 최적화하는 데 도움을 줍니다.
**React.memo**는 컴포넌트의 props를 이전 렌더링과 비교합니다. 만약 props가 변경되지 않았다면, React는 컴포넌트의 리렌더링을 건너뛰고 마지막 렌더링 결과를 재사용합니다. 이는 주로 순수 컴포넌트(pure components)에 유용합니다. 순수 컴포넌트는 동일한 props로 호출될 때 동일한 결과를 반환하는 컴포넌트를 말합니다.
Canvas 컴포넌트와 UI 에서 Provider 를 통해 받은 데이터를 변경할 시 해당 Provider를 사용하는 모든 컴포넌트가 리렌더링되었습니다. 동일한 interface에서 모든 변수를 관리했기 때문입니다. 변경된 값만 리렌더링 되도록 **React.memo**를 사용하여 조절하고자 하였습니다.