On this page

2023년 05월 18일

수정하기

문서 생성 2023-05-18 22:39:57 최근 수정 2023-05-18 22:42:17

대불면시대

On this page

📚 오늘 도전하고, 배운 것
🤔 학습하면서 궁금하거나 어려웠던 점
🌅 내일은 무엇을?
✒️ log

📚 오늘 도전하고, 배운 것

React에 TypeScript 적용하기

useRef

const textInputRef = useRef<HTMLInputElement>(null);

tsconfig.json에 lib 옵션에 "dom"이 없다면 위 HTMLInputElement 같은 타입을 인식하지 못한다.

함수

type NewTodoProps = {
  onAddTodo: (text: string) => void;
};

state

const [todos, setTodos] = useState<Todo[]>()

Context API

type TodosCtx = {
  items: Todo[];
  addTodo: (text: string) => void;
  removeTodo: (id: string) => void;
};

export const TodosContext = React.createContext<TodosCtx>({
  items: [],
  addTodo: () => {},
  removeTodo: () => {}
});

type TodosProviderProps = {
  children: React.ReactNode;
};

const TodosContextProvider: React.FC<TodosProviderProps> = ({ children }) => {
  const date = new Date();

  const [todos, setTodos] = useState<Todo[]>([
    {
      id: date.toISOString(),
      text: "Learn React",
    },
    {
      id: new Date(new Date(date.getTime()).setMilliseconds(500)).toISOString(),
      text: "Learn TypeScript",
    },
  ]);

  const addTodoHandler = (todoText: string) => {
    setTodos(prevTodos => {
      return [...prevTodos, { id: new Date().toISOString(), text: todoText }];
    });
  };

  const removeTodoHandler = (todoId: string) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
  };

  const contextValue: TodosCtx = {
    items: todos,
    addTodo: addTodoHandler,
    removeTodo: removeTodoHandler
  };

  return (
    <TodosContext.Provider value={contextValue}>
      {children}
    </TodosContext.Provider>
  );
};

export default TodosContextProvider;

2023년 05월 18일

📚 오늘 도전하고, 배운 것

React에 TypeScript 적용하기

🤔 학습하면서 궁금하거나 어려웠던 점

🌅 내일은 무엇을?

✒️ log

LINKS TO THIS PAGE