컴포넌트 외부 변수 vs 컴포넌트 내부 변수

const products_1 = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const products_2 = [
    { title: 'Cabbage', isFruit: false, id: 1 },
    { title: 'Garlic', isFruit: false, id: 2 },
    { title: 'Apple', isFruit: true, id: 3 },
  ];
  //...
}

• 컴포넌트 바깥에서 변수를 선언하면 컴포넌트가 재렌더링되더라도 변수는 고정되고, 불필요한 재선언을 막을 수 있어 성능상 이점이 있을 수 있다.
• 컴포넌트 안에서 변수를 선언하면 컴포넌트가 렌더링될 때마다 변수가 재선언되므로, 해당 데이터가 컴포넌트의 상태에 따라 달라져야 할 때 더 유연하게 사용할 수 있다.

React 성능 최적화

리액트에서는 상위 컴포넌트가 렌더링되면 하위 컴포넌트도 재렌더링이 된다. 그렇기 때문에 불필요한 렌더링을 피하기 위해 리액트는 React.memo, useMemo, useCallback React Hook을 제공한다.

📌 React.memo

Props 변화에만 의존하는 최적화 방법이다.
React.memo는 props가 변할 때만 재렌더링 해준다.
React.memo를 통해서 최적화된 컴포넌트는 props check를 하게 된다.

사용방법)

import React,{memo} from 'react'

const Child = ({name})=>{
	....
}
export default memo(Child)

memo로 감싸주면 된다.

예제)

import {memo, useState} from 'react'

let Child = memo(function(){
	console.log('재렌더링됨')
  	return <div>자식임</div>
})

function Cart(){
	let [count, setCount] = useState(0)
    
    return (
    	<Child />
      	<button onClick={()=>{setCount(count + 1)}}>+</button>
    )
}

❗️단, useReducer, useState, useContext 상태와 관련된 Hook을 사용한다면 props의 변화가 없더라도 다시 렌더링 된다.

단점
memo로 감싸 놓은 컴포넌트는 항상 비교작업을 한다.
기존 props === 신규 props를 계속 비교하고 그 다음 재렌더링 여부를 결정

결론
React.memo는 꼭 필요할 때만 사용하는 게 좋다.
1. 컴포넌트가 같은 Props로 자주 렌더링 될 때
2. 컴포넌트가 렌더링이 도리 때 마다 복잡한 로직을 처리해야 될 때

props가 짧으면 장점이 되지만 props가 길고 복잡하면 단점이 된다.

📌 useMemo

처음 게산된 결과 값을 메모리에 저장해서 컴포넌트가 반복적인 렌더링이 되어도 해당 함수를 호출하지 않고 이전에 계산된 결과값을 메모리에 꺼내서 사용한다.

형태

const value = useMemo(()=>{
	return calculate()
},[item])

메모이제이션
해당 값을 메모리에 저장해서 필요할 때 마다 또 다시 계산하지 않고 메모리에 꺼내서 재사용을 하는 기법이다.
쉽게 말해서 자주 필요하는 값을 캐싱해두어서 캐시에서 꺼내서 사용한다.

📌 useCallback

메모이제이션 기법을 사용하는 최적화 기법
함수를 재사용하는 기법이다.

형태

const calculate = useCallback((num) => {
	return num + 1;
},[item])

---

참고
<React.StrictMode>는 React로 개발 할 때 여러가지 문제점들을 알려주기 때문에 개발할 때 켜놓고 하는게 좋다.

원시타입(값이 직접 저장된다.)
string, Number, Boolean, Null, Undefined, BigInt, Symbol
객체타입(메인 값은 다른 메모리에 저장되고 변수에는 해당 값을 가리키는 주소값이 저장된다.)
원시 타입을 제외한 모든 것, Object, Array,...

비교
원시(Primitive)타입

const locationOne = "korea"
const locationTwo = "korea"

locationOne === locationTwo // true

객체(Object)타입

const locationOne = {
	country:"korea"
}
const locationTwo = {
	country:"korea"
}

locationOne === locationTwo //false