25일차 TIL (React 숙련 / Optimization , lifeCycle, virtual DOM)

Hook 최적화
react.memo,
react.useCallback, useMemo

리랜더링이 많이 생기면 좋지않겠지

발생 조건은
컴포넌트에서 state가 바뀌었을 때
컴포넌트가 내려 받은 props가 변경되었을 때
부모 컴포넌트가 리랜더링 된 경우 자식 컴포넌트들 모두가

앞서 배운 Hook들에서는 렌더링이 자주 일어나며
이는 리렌더링 + 코스트가 발생하며 이것들을 최대한 줄여야한다
그렇기 때문에 Optimization 최적화를 해야한다.

react.memo - *컴포넌트를 캐싱 [부모 컴포넌트의 state의 변경으로 인해 props변경이 일어나지않는 한 리랜더링이 되지않음]
컴포넌트 하단에 내보내주는 export default React.memo(컴포넌트명);
이렇게 감싸주면됨 React.memo()

react.useCallback - *함수를 캐싱
랜더될때 마다 새로운 주소 값을 갖게 되어서
+ (props)를 내려줄 때 새로운 주소값을 갖게 되어서
컴포넌트 입장에서는 props가 바뀌었구나 인식하고 리랜더링을 한다.

이런 상황때문에 아예 함수자체를 메모리제이션 하는 방법을 쓰는데,
함수를 별도 메모리 제이션 : 별도 공간에 저장해놓고 변경되지 않게 막는다.

    const resetBtn = useCallback(() => {
        console.log(`${count}에서 0으로 초기화 되었습니다.`);
        setCount(0);
    }, [count]);

특정 state가 변경될 때 처음 저장한 콜백함수가 갱신되어야한다면 뒤[ ] 의존성 배열에
해당 state를 넣어야만 한다.

+ {count}가 변경될 때 만큼은 useCallback으로 다시 저장되어야 하기때문에
[ ] 의존성 배열에 state 인 count를 넣어준다

useMemo - * 값(value)을 캐싱
기존의 값이 저장될때 주소가 1234라면 리랜더링 되면서 주소값이 4958로 바뀌게(달라지게) 된다 라고 react 컴포넌트에서 인식을 한다
그렇게 때문에 useEffect가 발동을한다. <- 여기에서 사용자가
기존 배열(기존값이) 바뀌지 않았어 를 명시해주기 위해 useMemo를 사용
    const value22 = useMemo(() => heavyWork(), [ ]); 감싸주고 뒤에 의존성 배열
    console.log(value22);

해당 함수가 작동이 될 때만 갱신이 되는 (리랜더링이 되는)

하지만 남발하게된다면 오히려 성능이 악화된다; 반드시 필요한 경우에만 쓰도록

생명주기 - lifeCycle
# Mount - 컴포넌트가 생설될때
constructor 컴포넌트가 처음 만들어질 때 호출 : 생성자

getDerivedStateFromProps
부모 컴포로부터 props를 전달받을 때 state에 값을 일치시키는 역할을 하는 메서드
마운트될 때, 업데이트(렌더링)될때 호출
최초 mount가 준비가 되면 호출 (렌더링하는) 메서드
컴포넌트를 DOM에 마운트하기 위해 사용

ComponentDidMount
컴포넌트가 브라우저에 표시된 후에 호출되는 메서드


# Update  
컴포넌트가 갱신될때를 의미
state가 변경되거나
props가 변경되거나
부모 컴포가 변경되거나
(강제적으로 update하기도 함)

getDerivedStateFromProps //

shouldComponentUpdate
렌더링 여부를 판단 (함수의 호출 결과 true / false) 반환
true면 렌더링 진행 그렇지않으면 x


함수형 컴포에서는 memo useMemo useCallback으로 처리하던 내용을
클래스형 컴포넌트에서는 shouldComponentUpdate로 보완

getSnapshotBeforeUpdate
 - 컴포넌트에 변화가 일어나기 전에 DOM의 상태를 저장
 - compoentDidUpdate함수에서 사용하기 위한 형태의 데이터
 compoentDidUpdate
   컴포넌트 업데이트 작업 완료 후 호출


# Unmount
컴포넌트가 제거되는 시점을 말함
componentWillUnmount
컴포넌트가 사라지기 전에 호출되는 메서드
uesEffect에서 "return"과 동일