const [selected, setSelected] = React.useState<readonly string[]>([]);

const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (event.target.checked) {
    const newSelected = rows.map((n) => n.name);
    setSelected(newSelected);
    return;
  }
  setSelected([]);
};

  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected: readonly string[] = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    setSelected(newSelected);
  };

• 왜 state 업데이트가 바로 되지 않을까 Object Composition
  • state변경은 즉시 처리하는 것이 아니라, 비동기로 처리된다.
  • 따라서 state를 변경하게되면 컴포넌트 리렌더링을 큐에 등록하게되고 다음 리렌더링을 하게될 때 새로 갱신된 state와 함께 렌더링된다.
  • 리액트가 setState를 통해 여러번 render하지 않고 한번의 render만 발생시키기 위한 장치로 인해 일어난 상황

/**
   * 데이터베이스 타입 목록 조회
   */
  const getDatabaseTypeList = () => {
    DatabaseService.selectDatabaseList().then(response => {
      console.log('selectDatabaseTypeList', response.data);
      if (response.data.status === STATUS.SUCCESS) {
        const list = response.data.data;
        list.map(item => (item.icon = getDatabaseIcon(item.engine)));
        setDatabaseList(list);
				// 여기서 list가 아닌 databaseList에 조건을 걸면 직전에 setState해준 값이 들어가있지 않으므로
				// 아래의 조건이 실행되지 않는다
        if (!isModifyMode && list.length > 0) { 
          setDatabaseId(sourceId);
        }
      }
    });
  };

setState의 비동기성으로 생기는 문제