🤓 What I Learned Today

용어설명

랜더링 : 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지 컴포넌트에게 작업을 요청하는 것을 의미

리랜더링 :React가 데이터 변화에 따라서 화면을 다시 그리는 현상 element Type / state 혹은 props 등이 변하는 것을 관찰하고 있다가 변하면 그때 맞춰서 다시 그려주는 것

리액트가 DOM에 업데이트하는 과정

1. render 단계: React.createElement로 생성
2. reconciliation 단계: 이전 elements 와 새로 생성된 elements를 비교
3. commit 단계:DOM update(필요에 따라)

리랜더링 발생 조건

• 부모 컴포넌트가 랜더링 되었을때
• props가 변경되었을때
• state가 변경되었을때
• forceUpdate(강제로 리랜더링 시킬때)→사용하지 않는 것을 더 권장한다.

불필요한 리랜더링 피하는 방법

→왜? 사이트의 효율성을 위해서 필요한 작업으로 useMemo 와 useCallback 은 미리 값을 기억하여 값의 변화가 없을 경우에는 리랜더링 되지 않도록 막아 최적화를 도와준다.

🤔 Code Snippets

import React, { useState, memo } from "react";
import { useDispatch, useSelector } from "react-redux";

//재렌더링 막는 memo, useMemo

//자식 컴포넌트 재렌더링 막기
// const Child = () => {
//  console.log("재렌더링됨")
//   return <>자식</>;
// };
// 2.꼭 필요할 때만 재렌더링해주는 memo 사용 그렇지만 코드를 다르게 작성해야한다.
let Child = memo(function () {
  console.log("재렌더링됨");
  return <>자식</>;
});
//memo의 원리: props가 변할때만 재렌더링 해주며 memo로 재렌더링 오래걸리는 컴포넌트 감싸놓으면 좋음
//렌더링 되기전에 기본 props == 신규 props 와 계속 비교

//버튼을 누르면 재렌더링됨
const Cart = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  const [count, setCount] = useState(0);

  return (
    <>
      {/* 자식 컴포넌트도 재렌더링됨 */}
      {/* 1.그러면 꼭 필요할 때만 재렌더링해주고 싶으면? */}
      <Child count={count}></Child>

      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </>
  );
};

export default Cart;

🚀 Challenges Experienced

useEffect 와 useMemo의 실행 시점의 차이

useEffect : return 문에 끝나고 실행
useMemo : 렌더링 될 때 같이 실행

const 함수 = () => {
  return 반복문10억번 돌린결과 
}

const Cart = () => {
//컴포넌트 렌더링시 1회만 실행해줌
  let result =  useMemo(()=>{return 함수()},)

  //state가 변화 할때만 코드 실행
  // let result =  useMeno(()=>{return 함수()},[state])

  const state = useSelector((state) => state);
  const dispatch = useDispatch();

  return <></>;
};

export default Cart;