[React] useMemo (React-hooks)

👩‍🎓 useMemo란 뭘까?

컴포넌트가 재 렌더링 될 때 변경사항이 없으면 메모리에서 처음 렌더링 값을 불러오는 것


👩‍🎓 일단 useMemo를 이해하기 위해선 리액트의 렌더링 구조를 알아야한다

함수형 컴포넌트 기준으로 렌더링 구조를 알아보자


👩‍🎓 리액트의 렌더링 구조

처음 함수형 컴포넌트를 불러옴 → 값 변경 → 변경값을 들고 컴포넌트를 재 호출
→ 컴포넌트 내부 데이터&변수 초기화 → 값 업데이트 완료

이때 값을 업데이트 할 때 변경되지 않는 값 까지 다시 초기화 하는 것이 비 효율적 이라는 판단이 듬

💡 그래서 나온게 useMemo 이다


👩‍🎓 useMemo의 기본코드

const 메모 = useMemo(()=>{
 return function()
},[component]) //useEffect와 같은 논리

설정된 컴포넌트의 값이 업데이트 될 때 마다 메모의 useMemo가 실행

useMemo 실전에서 써보기

👩‍🎓 예제)

const [number,setNumber] = useState(0);
const [isboolean,setIsboolean] = usestate(true)

const showBoolean = {
result :  isboolean ? "성공" : "실패"
}

useEffect(()=>{
 console.log("콘솔창 뜹니다")
},[showBoolean])

<input type="number" value={number} onChange={(e)=> setNumber(e.target.value)}/>
<p>현재숫자는? :  {number}</p>
<button onClick={() => setIsboolean(!isboolean)}>boolean변경</button>
<div>{showBoolean.result}</div>

👩‍🎓 이렇게 있다는 가정, number의 값을 증가 시킬려고 한다.

number의 state를 증가 시켰을 때, 건들이지 않은 showBoolean(이)가
의존되어 있는 useEffect가 실행이 되는 상태이다, 이걸 해결해야하는 문제


👩‍🎓 문제분석

1. number의 값을 증가시키면 state가 변경되면서 재 렌더링이 발생 하는데 재 렌더링 시
   컴포넌트안에 선언된 [number,isboolean,showBlooean] 이런 데이터들이 다 초기화 되기
   때문에 비 효율적 재 렌더링이 발생

2. 이때 객체는 초기화 될때 바로 showBoolean에 저장 되지않고 메모리 주소에
   (캐싱-showBoolean) 저장 했다가 변수에 담겨 showBoolean.name 이렇게 사용 하는데
   컴포넌트가 재 렌더링 시 이전 메모리에 저장 되었던 데이터를 참조해서
   메모리 주소를 (캐싱2-showBoolean)로 새로 덮어쓰고 변수에 저장 함

3. 그렇기 때문에 useEffect로 showBoolean을 의존성 설정 했을 경우 showBoolean의 값이 바뀌지 않아도 캐싱데이터가 바뀌기 때문에 useEffect가 실행이 되는 것이다
   
   

👩‍🎓 어떻게 해결할까?

💡 useEffect에 의존되어 있는 showBoolean을 useMemo로 메모라이즈 시키면 된다

const showBoolean = useMemo(()=>{
 result : isboolean ? "성공" : "실패"
},[isboolean])

이렇게 바꿔주면 컴포넌트가 재 렌더링 되도 useMemo가 가지고 있는 값이 바뀌지 않아
useEffect가 실행되지 않는다.

🙎‍♂️ 이제 useCallback 뿌시러 간다.