6. React와 함께 TypeScript 사용하기(5), [ State ]

1. State 다루기

< App.js >
    const items = [
        { name: "ms", age: 3, address: "csd-x5", phone: 323 },
        { name: "cs", age: 5, address: "csd-x7", phone: 2323 },
    ];

    function App() {
        const [todo, setTodo] = useState<{ name: string; age: number; address: string; phone: number }[]>([]);

 

2. 타입 별칭을 이용해, 아웃소싱하자

    < App.js >
            import { Todo } from "./models/todos";

            const items = [
            { name: "ms", age: 3, address: "csd-x5", phone: 323 },
            { name: "cs", age: 5, address: "csd-x7", phone: 2323 },
            ];

            function App() {
                const [todo, setTodo] = useState<Todo[]>([]);

    <models / todos.ts >

            export type Todo = {
                name: string;
                age: number;
                address: string;
                phone: number;
            };

3. 하위 컴포넌트로 넘겨보자

<models / todos.ts > ===================================================

        export type Todo = {
            name: string;
            age: number;
            address: string;
            phone: number;
        };

< App.tsx > ===================================================
        import NewTodo from "./components/NewTodo";
        import { useState } from "react";
        import { Todo } from "./models/todos";      // type 아웃소싱


        function App() {
            const [todo, setTodo] = useState<Todo[]>([]);   // useState 안에 들어갈 todo 의 타입 지정

            const onAddTodo = (todos: Todo) => {        // 하위 컴포넌트로 넘길 함수, 받아올 값 타입지정
                setTodo((prev) => [...prev, todos]);
            };

            console.log(todo);

            return (
                <div className="App">
                    <NewTodo onAddTodo={onAddTodo} />       // 넘기고
                </div>
            );
        }

        export default App;


< Component / Newtodo.tsx> ===================================================

        import { useRef } from "react";
        import { Todo } from "../models/todos";

        const NewTodo: React.FC<{ onAddTodo: (todos: Todo) => void }> = (props) => {    // 받아올 함수 타입지정, 파라미터 타입지정
                                                                                        // void 는 return 값이 없어서 생긴 타입
            const textRef = useRef<HTMLInputElement>(null);     // html input 타입지정         

            const submitHandler = (event: React.FormEvent) => {         // event 타입 지정
                event.preventDefault();

                const name = textRef.current!.value;    // ! 를 사용해야만, "타입" 이 올바르게 명명된다.
                const age = 23;                     // 나머지는 그냥, 했다 치고
                const address = "ss";
                const phone = 1233;

                props.onAddTodo({ name, age, address, phone });     // 받은 함수로 넘겨준다.
            };

            return (
                <form onSubmit={submitHandler}>
                    <div>
                        <label htmlFor="todoText"></label>
                        <input type={"text"} id={"todoText"} ref={textRef} />
                    </div>
                    <div>
                        <button> 제출 </button>
                    </div>
                </form>
            );
        };

        export default NewTodo;

 

4. Todo List 에서, 할일을 지우는 함수를 만들어보자 [with 상향식 State 전달, func.bind() ]

< App.tsx >

    function App() {
            ...

        const removeTodo = (todoName: string) => {
            const newArray = todo.filter((item) => item.name !== todoName);
            setTodo([...newArray]);
        };

        return (
            <div className="App">
            <Todos items={todo} removeTodo={removeTodo} />
            <NewTodo onAddTodo={onAddTodo} />
            </div>
        );

< Todos.tsx >

        const Todos: React.FC<{
            items: Todo[];
            removeTodo: (todoName: string) => void;
        }> = (props) => {

            return (
            <div>
                <div>
                <ul>
                    {props.items.map((item) => (
                    <TodoItems key={item.phone} todoName={item.name}  removeTodo={props.removeTodo}/>
                    ))}
                </ul>

< TodoItem.tsx >

        const TodoItems: React.FC<{
            todoName: string;
            removeTodo: (todoName: string) => void;
        }> = (props) => {
            const deleteHandler = (name: string) => {
                props.removeTodo(name);
            };

            return (
                <div>
                    {props.todoName}
                    <button onClick={deleteHandler.bind(null, props.todoName)}> 삭제</button>
                </div>
            );
        };

        export default TodoItems;