[26.02.04] React 재직자 교육 1 - useMemo, React.memo

게시판 UI 만들기

 

boards갯수만큼 <BoardListItem>으로 요소를 만든다.

 

 

React.memo

 

React.memo

컴포넌트에 동일한 props가 들어온다면 React.memo는 컴포넌트 렌더링 과정을 스킵하고 마지막에 렌더링된 결과를 재사용한다.

React.memo는 오직 props 가 변경됐는지 아닌지만 체크한다.
이때 props 를 받는 컴포넌트는 자식 컴포넌트로, 부모 컴포넌트로부터 props 를 받는다.
이때 문제는, 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 함께 리렌더링된다는 것이다.
이러한 문제를 해결하기 위해 React.memo 를 사용할 수 있다.

 

아래 코드에서 MyComponent 가 이전과 동일한 props 를 받아 가장 마지막에 렌더링했던 결과를 다시 렌더링해야 한다면, React는 컴포넌트 렌더링 과정을 스킵하고 메모이제이션해두었던 렌더링된 값을 그대로 다시 리턴해준다.

const MyComponent = React.memo((props) => {
	return (/* 컴포넌트 렌더링 코드 */)
});

BoardListItem 에서 React.memo();

가  으면 리랜더링이 일어나지 않는다.

https://velog.io/@sujinjwa/useMemo%EC%99%80-React.memo%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%9D%B4%EB%93%A4%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%84-%EC%9D%B4%ED%95%B4%ED%95%B4%EB%B3%B4%EC%9E%90

Memoization을 이용한 useMemo와 React.memo

 

 

📋 useMemo란?

useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

출처 : https://velog.io/@jinyoung985/React-useMemo%EB%9E%80

[React] useMemo란?

 

 

자식 컴포넌트가 변경이 되어도 부모 컴포넌트가 리랜더링이 안되게 하려면 React.memo를 사용한다

 

useMemo는 함수를 다시 리랜더링 할거냐 말거냐의 문제이고

React.memo는 자식이 바뀌어도 부모를 리랜더링 안일어나게 하는것이다.

 

공통점

React.memo와 useMemo 모두 props가 변하지 않으면(이전 props와 동일하면) 인자로 넘긴 함수는 재실행되지 않고, 이전의 메모이즈된 결과를 반환한다는 점에서 공통점이있다. 

 

아래 React.memo와 useMemo를 사용한 코드를 보면 두가지 코드는 props.name의 값이 변하지 않는다면 리렌더링 되지 않고 이전의 값을 반환한다는 점에서 동일하게 동작한다.

 

차이점

1. React.memo는 HOC, useMemo는 hook이다.

2. React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능하다.

 

기본적으로 부모가 리랜더링 되면 자식이 리랜더링이 된다.

부모로부터 받은 데이터가 없는 경우에는   Rect.memo를 사용한다.

 

완전히 둘은 용도가 다르다.

 

 

성능 개선을 위해 고려해야할 사항