리다기 정리4(아이콘, 최적화)

자동완성을 만들려면 jsconfig.json 파일생성을 해서 ctl+space를 눌르면 코드 생성.

{
  "compilerOptions": {
    "target": "es6"
  }
}

 

flex 알고싶으면 추천

flexboxfroggy.com/#ko

Flexbox Froggy

 

yarn add react-icons

react 아이콘

react-icons.github.io/react-icons/#/icons/md

React Icons

프로덕션 모드

yarn build

yarn globval and serve

serve -s build

 

성능 최적화를 위해 바뀌지 않은 아이템들의 리랜더링 막기 (클래스는 shouldComponentUpdate)

export default React.memo(TodoListItem);

 

1. useState의 함수형 업데이트

함수 바뀌지 않게 하기.

usecallback에서

      setTodos(todos=>todos.concat(todo));},[]

 

2. useReducer 사용하기

function todoReducer(todos, action) {
  switch (action.type) {
    case 'INSERT':
      return todos.concat(action.todo);
    case 'REMOVE':
      return todos.filter((todo) => todo.id !== action.id);
    case 'TOGGLE':
      return todos.map((todo) =>
        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo,
      );
    default:
      return todos;
  }
}

  const onRemove = useCallback((id) => {
    dispatch({ type: 'REMOVE', id });
    // setTodos((todos) => todos.filter((todo) => todo.id !== id));
  }, []);

두가지는 취향 차이

 

 

스크롤하기전에(화면에 보이지 않는 컴포넌트) 컴포넌트 렌더링 하지 않고 보여질 때 렌더링 하기

yarn add react-virtualized

 

1

import React, { useCallback } from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';
import { List } from 'react-virtualized';

const TodoList = ({ todos, onRemove, onToggle }) => {
  const rowRenderer = useCallback(
    ({ index, key, style }) => {
      const todo = todos[index];
      return (
        <TodoListItem
          todo={todo}
          key={key}
          onRemove={onRemove}
          onToggle={onToggle}
          style={style}
        />
      );
    },
    [onRemove, onToggle, todos],
  );
  return (
    <List
      className="TodoList"
      width={512}
      height={513}
      rowCount={todos.length}
      rowHeight={57}
      rowRenderer={rowRenderer}
      lilst={todos}
      style={{ outline: 'none' }}
    />
    // <div className="TodoList">
    //   {todos.map((todo) => (
    //     <TodoListItem
    //       todo={todo}
    //       key={todo.id}
    //       onRemove={onRemove}
    //       onToggle={onToggle}
    //     />
    //   ))}
    // </div>
  );
};

export default React.memo(TodoList);

2

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo, onRemove, onToggle, style }) => {
  const { id, text, checked } = todo;
  return (
    <div className="TodoListItem-virtualized" style={style}>
      <div className="TodoListItem">
        <div
          className={cn('checkbox', { checked })}
          onClick={() => onToggle(id)}
        >
          {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
          <div className="text">{text}</div>
        </div>
        <div className="remove" onClick={() => onRemove(id)}>
          <MdRemoveCircleOutline />
        </div>
      </div>
    </div>
  );
};

export default React.memo(
  TodoListItem,
  (preProps, nextProps) => preProps.todo === nextProps.todo,
);