3-5. 리액트 성능최적화

리액트에서 Props와 State를 변경하면 리랜더링 발생
바꾸는 State가 없어도 SetState 함수를 호출하게되면 리렌더링이 일어나기 때문

import React, { Component } from 'react'; 
class Test extends Component{ state = { counter : 0 }; // 이부분! 

shouldComponentUpdate(nextProps, nextState){ 

	if(this.state.counter !== nextStaste.counter){ 
		return true; 
	} 
	return false; 
} 

onClick = () => { 
	this.setState({}); 
}; 

render(){ 

	return ( 
		<div> <button onClick={this.onCLick}>클릭</button> </div> 
		); 
	} 
}

shouldComponentUpdate

shouldComponentUpdate 함수 : 현재 state와 변경되는 state를 비교하여 리렌더링을 할 것인지를 결정

nextState = 변경되는 state
this.state = 현재 state

리턴값이 true일 경우에 리렌더링
false일 경우에 리렌더링 X

pureComponent**

import React, { PureComponent } from 'react'; 
class Test extends PureComponent{ // ...

Component 대신에 PureComponent를 import

PureComponent 내부에서 shouldComponentUpdate를 자동으로 구현하여
ShouldComponentUpdate를 작성하지 않아도 리랜더링 발생X

복잡한 구조일 경우 퓨어컴포넌트가 인식 못할 가능성이 있다.

퓨어컴포넌트에서 배열에 값을 넣을 때

setState에서 배열에 push를 사용하면 리액트가 인식을 못하므로
함수를 사용하여 이전의 값과 새로운 값을 배열어 넣어서 처리함

// (X) setState({ array : this.state.array.push(a) }); 
// (O) setState({ array : [...this.state.array, a] });

memo(Memoization) : hooks 에서 사용

import React, { memo } from 'react'; 

const Test = memo() => { 
	...
}

function Test() { 
	return <div>Test이다.</div>; 
} 

const Memoized = memo(Test);

hooks는 memo를 사용해 필요치않는 렌더링을 방지한다.
memo 또한 복잡한 구조에서는 인식 x

성능 최적화를 위해 사용
pureComponent
shouldComponentUpdate
memo