🔍 최적화

한 입 크기로 잘라 먹는 리액트 섹션 11 - 최적화

최적화란?

웹 서비스의 성능을 개선하는 모든 행위를 일컫는 말이다.

React App 내부의 최적화 방법

1. 컴포넌트 내부의 불필요한 연산을 방지한다.
2. 컴포넌트 내부의 불필요한 함수 재생성을 방지한다.
3. 컴포넌트의 불필요한 리렌더링을 방지한다.

useMemo - 불필요한 연산 방지

메모리제이션(결과값을 저장하여 기억) 기법을 기반으로 불필요한 연산을 최적화하는 리액트 훅이다.

import "./List.css";
import TodoItem from "./TodoItem";
import { useState, useMemo } from "react";

const List = ({ todos, onUpdate, onDelete }) => {
  const [search, setSearch] = useState("");

  const onChangeSearch = (e) => {
    setSearch(e.target.value);
  };

  const getFilteredData = () => {
    if (search === "") {
      return todos;
    }
    return todos.filter((todo) =>
      todo.content.toLowerCase().includes(search.toLowerCase())
    );
  };

  const filteredTodos = getFilteredData();

  const { totalCount, doneCount, notDoneCount } = useMemo(() => {
    const totalCount = todos.length;
    const doneCount = todos.filter((todo) => todo.isDone).length;
    const notDoneCount = totalCount - doneCount;
    return { totalCount, doneCount, notDoneCount };
  }, [todos]);

  return (
    <div className="List">
      <h4>Todo List 🌱</h4>
      <div>
        <div>total: {totalCount}</div>
        <div>done: {doneCount}</div>
        <div>notDone: {notDoneCount}</div>
      </div>
      <input
        value={search}
        onChange={onChangeSearch}
        placeholder="검색어를 입력하세요"
      />
      <div className="todos_wrapper">
        {filteredTodos.map((todo) => (
          <TodoItem
            key={todo.id}
            {...todo}
            onUpdate={onUpdate}
            onDelete={onDelete}
          />
        ))}
      </div>
    </div>
  );
};

export default List;

List.jsx에 코드를 작성하였다. getAnalyzedData가 불필요하게 연산되는것을 막기 위해 useMemo를 사용하였다.

출력 화면:

React.memo

컴포넌트를 인수로 받아, 최적화된 컴포넌트로 만들어 반환하는 것
즉, 부모 컴포넌트가 리렌더링이 되더라도 자신이 받는 props가 바뀌지 않으면 다시 리렌더링이 발생하지 않도록 메모이제이션이 되기 때문에 불필요한 리렌더링이 방지되어서 자동으로 최적화가 이루어지게 되게 하는 것이다.

import "./Header.css";
import { memo } from "react";

const Header = () => {
  return (
    <div className="Header">
      <h3>오늘은 📆 </h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
};
const memoizedHeader = memo(Header);

export default memoizedHeader; //window + . 로 이모지 추각 가능하다.

Header 컴포넌트가 불필요하게 리렌더링 되는 문제점을 해결할 수 있다.

useCallback - 불필요한 함수 재생성 방지하기

기능 먼저 구현하고 최적화는 나중에 하는 것을 권장
최적화가 필요한 부분만 하기 (모든 부분은 불필요)

import "./TodoItem.css";
import { memo } from "react";

const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => {
  const onChangeCheckbox = () => {
    onUpdate(id);
  };

  const onClickDeleteButton = () => {
    onDelete(id);
  };

  return (
    <div className="TodoItem">
      <input
        onChange={onChangeCheckbox}
        readOnly
        checked={isDone}
        type="checkbox"
      />
      <div className="content">{content}</div>
      <div className="date">{new Date(date).toLocaleDateString()}</div>
      <button onClick={onClickDeleteButton}>삭제</button>
    </div>
  );
};

export default memo(TodoItem);

import "./App.css";
import { useState, useRef, useReducer, useCallback } from "react";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";

const mockData = [
  {
    id: 0,
    isDone: false,
    content: "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: "코어타임 갖기",
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: "일찍 일어나기",
    date: new Date().getTime(),
  },
];

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "UPDATE":
      return state.map((item) =>
        item.id === action.targetId ? { ...item, isDone: !item.isDone } : item
      );
    case "DELETE":
      return PopStateEvent.filter((item) => item.id !== action.targetId);
    default:
      return state;
  }
}

function App() {
  const [todos, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

  const onCreate = useCallback((content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        isDone: false,
        content: content,
        date: new Date().getTime(),
      },
    });
  }, []);

  const onUpdate = useCallback((targetId) => {
    dispatch({
      type: "UPDATE",
      targetId: targetId,
    });
  }, []);

  const onDelete = useCallback((targetId) => {
    dispatch({
      type: "DELETE",
      targetId: targetId,
    });
  }, []);

  return (
    <div className="App">
      <Header />
      <Editor onCreate={onCreate} />
      <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} />
    </div>
  );
}

export default App;

App.jsx 와 TodoItem.jsx 코드이다.