useList

리액트 훅으로, 배열을 상태로 관리해요. 효율적인 상태 관리를 제공하고 안정적인 액션 함수를 제공해요.

인터페이스

function useList<T>(initialState?: T[]): UseListReturn<T>;

파라미터

• initialStateT[]
  

  초기 배열 상태예요. 기본값은 빈 배열이에요.

반환 값

튜플 [list, actions]를 반환해요.

• listReadonlyArray<T>
  

  현재 배열 상태예요.

• actions.push(value: T) => void
  

  리스트의 끝에 값을 추가해요.

• actions.insertAt(index: number, value: T) => void
  

  지정된 인덱스에 값을 삽입해요.

• actions.updateAt(index: number, value: T) => void
  

  지정된 인덱스의 값을 업데이트해요.

• actions.removeAt(index: number) => void
  

  지정된 인덱스의 값을 제거해요.

• actions.setAll(values: T[]) => void
  

  전체 리스트를 새 배열로 교체해요.

• actions.reset() => void
  

  리스트를 초기 상태로 되돌려요.

예시

import { useList } from 'react-simplikit';

function TodoList() {
  const [todos, actions] = useList<string>(['Buy milk', 'Walk the dog']);

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => actions.removeAt(index)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={() => actions.push('New todo')}>Add</button>
      <button onClick={() => actions.reset()}>Reset</button>
    </div>
  );
}