TIL 12.20

1. memo를 사용하면 component의 불필요한 렌더링을 막을 수 있는데
2. component에 props가 있는 경우엔 useCallback과 useMemo를 사용하여 렌더링에 원인이 되는 것을 제거해줘야 정상 작동한다.
   useCallback의 사용대상은 함수, useMemo의 사용대상은 객체나 배열이다.
3. setState를 쓰지않는 원시데이터 (ex. let으로 선언한 변수) 는 useMemo를 사용하지 않아도 리렌더링하지 않는다.

memo() 사용방법

• export default memo(Button) 으로 Button.js를 감싸주면 2번의 이유가 발생하더라도 Button.js는 리렌더링을 하지 않는다.

import React, { memo } from "react";

const Button = () => {
  console.log("리렌더링되고 있어요.");
  return <button>버튼</button>;
};

export default memo(Button);

useCallback() 사용방법

useCallback() 안에서 첫번째 매개변수로 구현하고자 하는 함수가 들어오고, 두번째 매개변수자리에는 의존성 배열이 들어온다.(의존성배열에 값을 넣어주면 해당 값이 변경되었을 때 이 함수도 같이 재생성된다.)

// src/App.jsx

import React, { useCallback, useState } from "react";
import Button from "./components/Button";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (e) => {
    setValue(e.target.value);
  };

  const onClickHandler = useCallback(() => {
    console.log("hello button!");
  }, []);

  return (
    <div>
      <input type="text" value={value} onChange={onChangeHandler} />
      <Button onClick={onClickHandler} />
    </div>
  );
};

export default App;

// src/components/Button.jsx

import React, { memo } from "react";

const Button = ({ onClick }) => {
  console.log("리렌더링되고 있어요.");
  return <button onClick={onClick}>버튼</button>;
};

export default memo(Button);

useMemo() 사용방법

useCallback과 동일하다.

// src/App.jsx

import React, { useState } from "react";
import List from "./components/List";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (e) => {
    setValue(e.target.value);
  };

  const data = [
    {
      id: 1,
      title: "react",
    },
  ];

  return (
    <div>
      <input type="text" value={value} onChange={onChangeHandler} />
      <List data={data} />
    </div>
  );
};

export default App;

// src/components/List.jsx

import React, { memo } from "react";

const List = ({ data }) => {
  console.log("리렌더링되고 있어요.");
  return (
    <div>
      {data.map((todo) => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
};

export default memo(List);