히치키치

💙 useLocalStorage import react, { useEffect, useState } from 'react'; const useLocalStorage = (key: string, newState: TState) => { const [state, setState] = useState(() => { const stateStr = window.localStorage.getItem(key); return stateStr ? (JSON.parse(stateStr) as TState) : newState; }); useEffect(() => { window.localStorage.setItem(key, JSON.stringify(state)); }, [key, state]); return [state..

💙 ListScreen type Props = {}; const ListScreen: React.FC = () => { const { addTask, tasks, setTasks, updateTaskCompletion } = useTaskStore(); // 할 일 내용 작성을 위한 state const [newTaskLabel, setNewTaskLabel] = useState(''); // 1. 할 일 작성 const handleNewTaskLabel = (event: ChangeEvent) => { setNewTaskLabel(event.target.value); }; // 1. 할 일 추가 const submitNewTaskLabel = (event: React.FormEvent) => { eve..

💙 CreateContext // /src/contexts/task-store.ts import React, { createContext } from 'react'; import { Task } from '../types'; // 1. context 생성 : task가 원소인 리스트 (할 일들) const TaskContext = createContext([[], () => {}]); export default TaskContext; 💙 useContext 훅 : useTaskStore // /src/hooks/use-task-store.ts import useLocalStorage from './use-local-storage'; import React..

💙 전역 상태관리 구조 잡기 💙 Screen 구조 잡기 1. ListScreen (1) 할 일 작성 (2) 할 일 추가 (3) 할 일 완료 체크 (4) 완료된 할 일 일괄 삭제 (5) 할 일 삭제 2. FocusScreen (1) 할 일 완료 체크 (2) 할 일 미완료 중 랜덤 선택 (3) 할 일 미완료 중 가장 첫번째 화면에 띄우기 💙 ListScreen 기능에 따른 코드 구조 잡기 useState : newTaskLabel, setNewTaskLabel 1. 할 일 작성/추가 : input 태그와 form 태그 사용 useState의 newTaskLabel과 setNewTaskLabel을 통한 할 일 입력값(label) 관리 input 태그 : onChange 속성 실행 함수 : handleNewTa..