📖 "React에서 불필요한 re-rendering component 그만!!"히스토리

한 번 시간에 따라...

💎 클래스 컴포넌트 생성

🚩 순수 컴포넌트()

새 항목과 이전 항목/상태를 비교하여 차이가 없으면 구성 요소가 렌더링됩니다.

비교하다?? 그러나 그들을 비교하는 방법??

<< React에서 렌더링하는 경우 >>

1. state changes
2. parent component renders
3. props changes
4. shouldcomponentUpdate function returns true (I'll explain about it later)
5. forceUpdate

숫자 1과 2의 경우 React는 shallow compare을 통해 렌더링할지 여부를 결정합니다.

얕은 비교란 무엇입니까?

처음에는 참조가 무엇인지 알아야 합니다.
▼ from this website

참조로 전달(얕은 사본)
복사된 컵에 커피를 부으면 원본 컵도 함께 채워집니다(두 데이터가 동일한 메모리 할당 공간에 있기 때문)

값으로 전달(딥 카피)
복사한 컵에 커피를 부으면 원래 컵이 여전히 비어 있음

Javascript에서 기본 데이터 유형(String, Number, Bigint, Boolean, Undefined, Symbol)은 값으로 전달되고 Object, Array는 참조로 전달됩니다.

솔직히 원시 데이터 타입과 비교하는 것은 그리 어렵지 않지만 Object와의 비교에 신경을 써야 합니다.

객체 참조의 경우는 동일합니다.

import shallowCompare from 'react-addons-shallow-compare';

const a = { country: "poland", country2: "japan" }
const b = a

console.log(shallowEqual(a, b))
// true

객체 참조의 경우가 다름

중첩된 개체가 아님

import shallowCompare from 'react-addons-shallow-compare';

const a = { country: "poland", country2: "japan" }
const b = { country: "poland", country2: "japan" }

console.log(shallowEqual(a, b))
// true

중첩 개체

import shallowCompare from 'react-addons-shallow-compare';

const a = {
  country: "poland",
  coountry2: {
    city1: "tokyo",
    city2: "osaka"
  }
}

const b = {
  country: "poland", // country is primitive type, scalar data is the same -> true
  country2: { // country2 is object, so reference is different -> false
    city1: "tokyo",
    city2: "osaka"
  }
}

console.log(shallowEqual(a, b))
// ⭐ false

🚩 shouldComponentUpdate()

👦 so it is ok all components are pure component, isn't it?
👩‍💻 no, because cost of comparing old and new state/props is high
👦 what should I do then?
👩‍💻 just decide comparing condition by yourself via "shouldComponentUpdate()"

실제로 PureComponent는 shouldComponentUpdate()를 통해 누군가(페이스북 회사의 누군가)에 의해 구현된 구성 요소와 같습니다.

// something like that
class PureComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return !(shallowEqual(this.props, nextProps) && shallowEqual(this.state, nextState));
    }
    …
}

💎 기능적 구성 요소 생성

2022년 우리는 이 세대

🚩 반응.메모

PureComponent() + shouldComponentUpdate()와 같습니다.

// if new props changes, this component will be rendered
const Button = React.memo(props => {
    return <div>{props.value}</div>
})

// if you put second argument, it is like shouldComponentUpdate()
const Button = React.memo(
    props => {
        return <div>{props.value}</div>
    },
    (nextProps, prevProps) => {
        return nextProps.value === prevProps.value
    }
)

🚩 사용메모

👦 what is useMemo? it is the same of React.memo?
👩‍💻 no, similar though. React.memo is added by React version16.6, and then React hook is added by version 16.8, useMemo as well.
👦 aha
👩‍💻 useMemo renders only when props changes because it remembers calculation result

// when only "products props" changes, this component renders
const Component: React.FC = ({ products }) => {
    const soldoutProducts = React.useMemo(() => products.filter(x => x.isSoldout === true), [products])
}

🚩 useCallback

부모 컴포넌트가 자식 컴포넌트에게 함수의 props를 넘기면 새로운 함수(사실 함수는 객체의 하나일 뿐)가 만들어진다.
그것 때문에 자식 구성 요소는 이 새로운 기능이 이전 기능과 다르다는 것을 인식하고 슬프게도 다시 렌더링합니다.

↓ 자식/부모 구성 요소 간의 대화

👨 Parent「re-renderiiingggg!! And now I recreated function that I have !!」
👼 Child「Mom!! Give me your function as props!!」
👨 Parent「ok I give you my function!」
👼 Child「well now I need to confirm this object’s memory address is the same as object that I got before …. Hmmm different address, I also re-rendering!!!」

이러한 불필요한 재렌더링을 방지하려면 useCallback을 사용해야 합니다.