useMemo && React.memo

alajillo·2021년 10월 8일
0

React

목록 보기
7/12
post-thumbnail

컴포넌트 함수가 다시 렌더링 되는 상황

  1. 자신의 상태가 변경될때
  2. 부모로 부터 받은 props가 변경될때
  3. 부모의 상태가 변경될때

useMemo의 기능과 역할

부모 컴포넌트 -> 연산이 큰 props, 변화가 잦은 props -> 자식 컴포넌트

이런식으로 부모 컴포넌트가 자식 컴포넌트에게 연산이 큰 props와 변화가 잦은 props 두가지를 전달한다고 했을때 변화가 잦은 props가 변할때마다 자식 컴포넌트는 다시 렌더링이 된다.

그럼 렌더링이 될때마다 가만히 있는 연산이 큰 props을 또다시 연산을 하기 때문에 성능낭비가 발생한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

다시 렌더링 되더라도 연산하지 않고 기억해둘 변수를 useMemo()를 이용해서 할당한다.

useMemo의 인수로는 두개를 받는다. 첫번째는 연산할 함수를 실행시켜주는 함수를 넣고, 두번째 인자로는 배열을 받는다. 만약 배열 안에 값이 변경될때만 연산을 해서 값을 갱신 하는 방식이다.

React.memo

부모 컴포넌트가 다시 렌더링되면 자식 컴포넌트도 같이 렌더링 되는 것을 막기 위해 React.memo를 사용한다.

useMemo는 값을 캐싱하는 것이고 React.memo는 컴포넌트의 값을 캐싱하는 것이다.

useMemo는 지정한 값들이 변경될때 다시 렌더링을 하고 React.memo는 가상돔을 통해 해당 컴포넌트가 변경될때 다시 렌더링 한다.

const childComponent = React.memo(()=>{
		return (
			<div></div>
		)
	}
)

이런식으로 React.memo안에 인자로 JSX를 반환하는 함수를 넣어주면 된다.

profile
Developer's High

0개의 댓글