TIL_63_230127

63일 차 회고

• React.memo

React.memo란?

리액트에서 부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 도 렌더링 된다.
컴포넌트에서 리 렌더링이 필요한 상황에서만 해주도록 설정 할 수 있는데 그 함수를 React.memo 라고 한다.

React.memo는 리액트에서 제공하는 고차컴포넌트(보통컴포넌트를 받아서 최적화된 컴포넌트로 변환시켜주는것) (HOC) 이다.

memo -> memoization
이미 계산한 값을 메모리 상에 저장해 놓고 필요할 때 마다 꺼내서 재사용 하는 기법

React.memo로 최적화된 컴포넌트는 prop Check를 통해서 props에 변화가 없다면 이전에 렌더링 된 내용을 재사용 한다.
이미 이전에 렌더링을 해놓은 컴포넌트를 메모리 어딘가에 저장하고 새로 렌더링 하는 대신 꺼내서 재사용한다.

React.memo는 꼭 필요할때만!

컴포넌트를 메모이징 할때 렌더링된 결과를 어딘가에 저장해야 하기 때문에 메모리를 추가 적으로 소비하게된다.

React.memo 필요한 상황

1. 컴포넌트가 같은 props로 자주 렌더링 될때
2. 컴포넌트가 렌더링 될때마다 복잡한 로직을 처리 해야 할때

React.memo는 오직 Props 변화에만 의존하는 최적화 방법 이다.

useState, useReducer, useContext 등 상태와 관련된 훅을 사용한다면 props의 변화가 없더라도 여전히 state 나 context가 벼할 때 마다 다시 렌더링이 된다.

예시

App.jsx

const App = () =>{
	const [parentsNumber, setParentsNumber] = useState(0)
    const [childNumber, setChildNumber] = useState(0)
    
    const addParent = () =>{
    	setParentsNumber(parentsNumber + 1)
    }
    const addChild = () =>{
    	setChildNumber(childNumber + 1)
    }
    
    return(
    	<div>
	        <h2>부모 컴포넌트</h2>
        	<p>{childNumber}</p>
        	<button onClick={addParent}>부모 증가 버튼</button>
        	<button onClick={addChild}>자식 증가 버튼</button>
        
			<Child name={홍길동} age={childNumber}/>
      	</div>
    )

}
export default App

Child.jsx

import React,{memo} from 'react'

const Child = ({name,age}) =>{

    return(
    	<div>
	        <h2>자식 컴포넌트</h2>
        	<p>name:{name}</p>
        	<p>age:{age}</p>
      	</div> 
    )

}
export default memo(Child)

• 부모컨포넌트 addParent 을 클릭했을때 부모 컴포넌트만 렌더링 되는 것을 확인 할 수 있다.
• 메모 고차 컴포넌트는 Child를 인자로 받아서 최적화된 컴포넌트를 memo(Child) 를 반환한다.
• 컴포넌트가 렌더링 될 상황이 놓을 때마다 prop check 를 하여 {name,age}의 변화가 있을 때 렌더링을 하고, 변화가 없다면 렌더링을 하지 않고 이전에 이미 렌더링된 컴포넌트 결과를 렌더링 한다.
• 만약addChild 클릭한다면 Child 컴포넌트의 age prop 이 업데이트 되었기 때문에 다시 새로 렌더링을 하여 새로운 값을 보여준다.

폭넓은 최적화

• useCallback, useMeMo를 사용하면된다.

출처 및 참고