[TS/React] JS/props-drilling 방식으로 쓴 To-Do List 를 TypeScript로 바꿔보기

0308

 

이전에 만들었던 to-do list 는 CRA 프로젝트로 생성해 JS 언어로 써서 만든 것

이번에는 Vite -  React - TypeScript 프로젝트로 생성해서 JS => TS 로 바꿔봤다

 

(vite 을 통해 바로 typescript  템플릿으로 설정해 만들면 알아서 tsconfig.json 등 설정이 되어있으니 그냥 파일확장자만 ts / tsx 로 변경해서 쓰면 된다 ㅎㅎ 

다만 패키지 설치는 ts 임을 고려해주자

나는 yarn 패키지 관리자를 썼다.   (npm 이면 npm install ~ ) )

 

 

yarn add typescript @types/node @types/react @types/react-dom
yarn add @types/styled-components  (스타일컴포넌트를 쓰면) 

( yarn add --dev  로 devDependencies로 설치 할 수 있음 )

yarn add react-router-dom  도 해줘야 하는 거 같다..?

 

또한 TS 서버를 껐다 키면 패키지 설치 등 잘 적용될 수도 있어서..

VSC에서

ctrl + shift + p    혹은    맨 위 검색창에 > 치고 

=> TypeScript: Restart TS Server 

을 해주면 도움될 수 있다. 이런 식으로 에러가 사라지기도 했음 !!

 

아직 TS가 익숙치 않아서 생소하고 생각보다 어려웠다.

빨간 줄 에러가 뜨는 걸 해결해가면서 해주면 되는데 .. 

마냥 any 같은 슈퍼타입? 을 써주는 건 TS를 쓰는 의미가 없기 때문에, 타입을 잘 지정해주는 것, 또

possibly undefined 에 대한 처리를 해주는 것이 필요했다.

내 경우 optional chaining  (?) 으로 해결이 되는 게 많아서 자주 썼다.

 ? : 타입 ..  혹은  ?. 메서드.. 이런식으로 !

 

< props - drilling 방식에서 TS로 바꾸기 >

src 폴더 - types 폴더에 todoType.ts 를 만들고, 다음과 같이 작성해서 타입(interface)을 import 해와서 썼다

export interface Todo {
	id: string;
	title: string;
	content: string;
	deadline: string;
	isDone: boolean;
}

export interface TodoSetList {
	todoList: Todo[];
	setTodoList: (cb: (todoList: Todo[]) => Todo[]) => void;
}

export interface InProgressTodo extends Todo {
	isDone: false;
}

export interface DoneTodo extends Todo {
	isDone: true;
}

 

assets 폴더에는  sampleTodo.ts 를 만들어두고

import { Todo } from "../types/todoType";

export const sampleTodo: Todo = {

    id: "0",

    title: "리액트 강의 2회독하기",

    content: "1월 내로 리액트 강의내용 내 걸로 만들기 !",

    deadline: "2024-01-31",

    isDone: false,

};

 

 

Router.tsx에서  =>  todoList useState를  각각 Home, Detail 페이지에 props 로 전달

const [todoList, setTodoList] = useState<Todo[]>([sampleTodo]);

// 생략

<Route
path="/"
element={<Home todoList={todoList} setTodoList={setTodoList} />}
/>

 

그걸 받은 Home.tsx에서는 또다시 => TodoController.tsx 로 props 전달

const Home = ({ todoList, setTodoList }: TodoSetList) => {
	return (
		<div>
			<Header />
			<TodoController todoList={todoList} setTodoList={setTodoList} />
		</div>
	);
};

 

 

TodoController.tsx   

에서는 todoList, setTodoList 를 props 로 받고  (타입은 위에 만들어둔 TodoSetList 를 import) 

e 이벤트 객체 등에 대한 타입도 함수 선언부에서 정의해주기

sortTodoItems 함수 내에서 new Date ... 하는 부분도 TS 로 바꾸니 에러가 떠서, 구글링 후 .getTime()을 적용하니 해결

import React, { useState } from "react";
import TodoForm from "./TodoForm";
import CustomOrderSelect from "../common/CustomOrderSelect";
import TodoList from "./TodoList";
import {
	DoneTodo,
	InProgressTodo,
	Todo,
	TodoSetList,
} from "../../types/todoType";
import { ListsSection } from "../../styles/TodoStyle";

function TodoController({ todoList, setTodoList }: TodoSetList) {
	const [title, setTitle] = useState("");
	const [content, setContent] = useState("");
	const [deadline, setDeadline] = useState("");
	const [sortOrder, setSortOrder] = useState<string>("desc"); 

	// input의 value값 가져오기
	const handleTitleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setTitle(e.target.value);
	};

// 생략 ...

	// 추가: 마감날짜 오름차순 내림차순 정렬 드롭다운 메뉴 _select 설정시
	const handleSortOrderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
		setSortOrder(e.target.value);
		sortTodoItems(sortOrder);
	};

	// todoItem 정렬하는 함수
	const sortTodoItems = (sortOrder: string) => {
		setTodoList((prevTodoList) =>
			[...prevTodoList].sort((a, b) => {
				if (sortOrder === "asc") {
					return (
						new Date(a.deadline).getTime() - new Date(b.deadline).getTime()
					);
				} else {
					return (
						new Date(b.deadline).getTime() - new Date(a.deadline).getTime()
					);
				}
			})
		); // 정렬된 todoitem으로 todolist 상태 업데이트
	};

	// 추가하기 버튼 addTodoHandler
	const addTodoHandler = (newTodo: Todo) => {
		setTodoList((prevTodoList) => [...prevTodoList, newTodo]);
	};

	// form태그에 들어가는 함수 - 입력 후 추가하기로 실행
	const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();

		const nextTodo: Todo = {
			id: crypto.randomUUID(),
			title,
			content,
			deadline,
			isDone: false,
		};

		if (!title || !content) {
			alert("제목과 내용 모두 입력해주세요");
			// 이 경우 초기화없이 입력내용 유지시킴
			return;
		} else if (!deadline) {
			addTodoHandler({
				id: crypto.randomUUID(),
				title,
				content,
				deadline: "9999-12-31",
				isDone: false,
			});
			setTitle("");
			setContent("");
			setDeadline("");
		} else {
			addTodoHandler(nextTodo);
			setTitle("");
			setContent("");
			setDeadline("");
		}
	};

	// 삭제 버튼: filter메서드로 해당id의 카드빼기
	const deleteTodoHandler = (id: string) => {
		setTodoList((prevTodoList) =>
			prevTodoList.filter((todo) => todo.id !== id)
		);
	};

	// Done 완료&완료취소 버튼 (토글)
	const onToggleTodoItem = (id: string) => {
		setTodoList((prevTodoList) =>
			prevTodoList.map((todo) => {
				if (todo.id === id) {
					return { ...todo, isDone: !todo.isDone };
				}
				return todo;
			})
		);
	};

	const workingTodoList = todoList.filter(
		(todo) => todo.isDone === false
	) as InProgressTodo[];
	const doneTodoList = todoList.filter(
		(todo) => todo.isDone === true
	) as DoneTodo[];

	return (
		<main>
			<TodoForm
				onSubmit={handleFormSubmit}
				valueTitle={title}
				valueContent={content}
				valueDeadline={deadline}
				onChangeTitle={handleTitleInputChange}
				onChangeContent={handleContentInputChange}
				onChangeDeadline={handleDeadlineInputChange}
			/>
			{/* 순서정렬 select태그 섹션 */}
			<CustomOrderSelect
				selectValue={sortOrder}
				selectOnChange={handleSortOrderChange}
			>
				마감일 순으로 보기
			</CustomOrderSelect>
			<ListsSection>
				<TodoList
					type="working"
					todoList={workingTodoList}
					deleteTodoHandler={deleteTodoHandler}
					onToggleTodoItem={onToggleTodoItem}
				>
					Working 🏃‍♀️
				</TodoList>
				<TodoList
					type="done"
					todoList={doneTodoList}
					deleteTodoHandler={deleteTodoHandler}
					onToggleTodoItem={onToggleTodoItem}
				>
					Done 🎉
				</TodoList>
			</ListsSection>
		</main>
	);
}

export default TodoController;

 

 

참고로 위 코드에서,

input  value 값을 title, content, deadline 을 받아서 일일이 onChange 로 e.target.value 를 set State 해주고 있는데,  => 

Redux Toolkit 방식으로 리팩터링할때에는, 그냥 onSubmit 함수로, e.currentTarget. 'input의 name' 을 써서 바로 nextTodo 에 넣는 방식으로 바꿔주었다.  (useState 없이)

    // form태그에 들어가는 함수 - 입력 후 추가하기로 실행
    const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        const formData = new FormData(e.currentTarget);
        const title = formData.get("title") as string;
        const content = formData.get("content") as string;
        const deadline = formData.get("deadline") as string;

        const nextTodo: Todo = {
            id: crypto.randomUUID(),
            title,
            content,
            deadline,
            isDone: false,
        };

        if (!title || !content) {
            alert("제목과 내용 모두 입력해주세요");
            // 이 경우 초기화없이 입력내용 유지시킴
            return;
        } else if (!deadline) {
            addTodoHandler({
                id: crypto.randomUUID(),
                title,
                content,
                deadline: "9999-12-31",
                isDone: false,
            });
            e.currentTarget.reset();
        } else {
            addTodoHandler(nextTodo);
            e.currentTarget.reset();
        }
    };

 

 

 

TodoForm.tsx 

다음과 같이 props를 받고있다 .

기니까 type 을 따로 빼주는게 좋았을려나 ..!?

 

props 전달 시에 FC 를 쓴다거나 ..  PropsWithChildren 도  children넘겨줄 때 (아래 코드말고) 사용해보고싶었는데, 잘 되지 않아서 일단 이렇게 작성해두었다. ㅠㅠ 

function TodoForm({
	onSubmit,
	valueTitle,
	valueContent,
	valueDeadline,
	onChangeTitle,
	onChangeContent,
	onChangeDeadline,
}: {
	onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
	valueTitle: string;
	valueContent: string;
	valueDeadline: string;
	onChangeTitle: (e: React.ChangeEvent<HTMLInputElement>) => void;
	onChangeContent: (e: React.ChangeEvent<HTMLInputElement>) => void;
	onChangeDeadline: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {