TypeScript TodoList

9.23 (월)

1. Input 이벤트

👉 Vue와 React는 큰 차이점이 있는데, 그 중 한가지는 양방향과 단방향이다.
👉 Vue같은 경우에는 Input태그를 사용할 때, v-model을 사용하여 input에 작성되는 내용이 양방향으로 데이터가 작성이 되지만, React인 경우에는 그렇지않기 때문에 Input을 사용하기 위해서 이벤트를 걸어 양방향의 형태로 사용하게된다.

1-1. TodoInput.tsx

import {ITodo} from "../../type/todo.ts";
import {ChangeEvent, useState} from "react";

const initState: ITodo = {
    title : '',
    writer : '',
    dueDate : '',
}

function TodoInput() {

    const [todo, setTodo] = useState<ITodo>(initState) // 기본값을 initalState

    const handleChange =  (e:ChangeEvent<HTMLInputElement>) => { // 사용자가 입력한 값에 대한 이벤트
        console.log(e)
        console.log(e.target)
        //console.log(e.target.value);
        //console.log(e.target.name);


        todo[e.target.name] = e.target.value

        setTodo({...todo})
    }

    return (
        <div className="flex flex-col space-y-4 w-96 mx-auto">
            <label htmlFor="title" className="text-sm font-semibold text-gray-700">Title</label>
            <input
                type="text"
                name="title"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.title}
                onChange={e => handleChange(e)}
            />

            <label htmlFor="writer" className="text-sm font-semibold text-gray-700">Writer</label>
            <input
                type="text"
                name="writer"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.writer}
                onChange={e => handleChange(e)}
            />

            <label htmlFor="dueDate" className="text-sm font-semibold text-gray-700">DueDate</label>
            <input
                type="date"
                name="dueDate"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.dueDate}
                onChange={e => handleChange(e)}
            />
        </div>
    );
}

export default TodoInput;

👉 해당코드에서 handleChange를 보게 되면 e(이벤트)가 있는데, 해당 e에는 다양한 속성중에 target속성이 있고, 그내부에는 name 속성이 있다.
👉 아래 return의 input 태그 내부의 name값이 title이므로 target속성의 name속성또한 title이 된다. 하여, 해당 입력중인 input값이 title이라면

todo[e.target.name] = e.target.value
todo[title] = value(입력되는값) 이 되는것이다.

---

2. React 코드분석

2-0. todo.ts

export interface ITodo{
    mno? : number,
    title : string,
    writer : string,
    dueDate : string,
}

export interface IPageResponse{
    content : ITodo[],
    totalElements : number,
    number : number,
    first : boolean,
    last : boolean,
    size : number,
    totalPages: number,
}

👉 typeScript는 기본적으로 type을 미리 구성해두고 시작하는데, 해당 타입은 IpageResponse{ITodo[], totalElements..} 의 형태이다.

---

2-1. TodoAPI.ts

import {IPageResponse, ITodo} from "../type/todo.ts";
import axios from "axios";


const host:string = 'http://localhost:8088/api/v1/todos'

export const getTodoList = async (page?:number, size?:number): Promise<IPageResponse> => {

    const pageValue:number = page || 1 // 없으면 1페이지
    const sizeValue:number = size || 10 // 없으면 size는 10

    const res = await axios.get(`${host}/list?page=${pageValue}&size=${sizeValue}`)

    return res.data;

}

export const postTodo = async (todo:ITodo): Promise<number> => { // mno값을 반환하기 위해 return값을 number

    const res = await axios.post(`${host}`, todo) // 해당 url을 통해 todo 매개변수가 서버에 전달

    return res.data.mno
}

👉 해당코드는 api서버에서 데이터를 주고받는 코드로 docker서버를 host로 잡아두고,
getTodoList를 통해 매개변수를 page와 size로 해서 데이터를 get하여 return값으로는 IPageResponse의 형태로 받아온다.

👉 post를 통해 api서버에 todo의 매개변수 값을 넣어주고 return값으로 mno인 number값은 받아온다. - 이 값은 나중에 modal창에서 "몇 번이 등록되었습니다" 에 사용된다.

---

2-2. LoadingComponent.tsx

function LoadingComponent() {
    return (
        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50">
            <div className="bg-white p-8 rounded-lg shadow-lg w-96">
                <h2 className="text-xl font-semibold mb-4">Loading</h2>
                <p className="mb-6">Loading</p>
            </div>
        </div>
    );
}

export default LoadingComponent;

👉 해당 코드는 input 페이지 내부에서 등록이 된 이후에 잠시의 로딩페이지를 보여주기 위해 common패키지에 구성하였다.

---

2-3. PageComponent.tsx

import {IPageResponse} from "../../type/todo.ts";

interface Props {
    pageResponse:IPageResponse;
    changePage:(p:number) => void;
}

const makeArr = (from:number, to:number, prev:boolean, next:boolean):number[] => {

    const arr:number[] = []

    if(prev){
        arr.push(from-1)
    }

    for (let i = from; i < to; i++) {
        arr.push(i);
    }
    return arr
}


function PageComponent({pageResponse, changePage}:Props) {

    const current: number = pageResponse.number + 1 // 현재페이지 0 부터시작하므로 + 1
    const tempLast: number = Math.ceil(current/10.0) * 10 // 현재 11페이지일때 20페이지까지 나오기
    const startPage: number = tempLast - 9
    const endPage: number = pageResponse.totalPages < tempLast ? pageResponse.totalPages : tempLast;
    //const prev: boolean = startPage !== 1

    const pageNums:number[] = makeArr(startPage, endPage, false, false)

    const lis = pageNums.map( num => <li
        className='px-4 py-2 text-white bg-blue-500 border border-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300'
        key={num}
        onClick={() =>changePage(num)}
    >

        {num}

    </li>)

    return (
        <div>
            <ul className='flex justify-center items-center space-x-2 mt-6'>
                {lis}
            </ul>
        </div>
    );
}

export default PageComponent;

👉 해당코드는 page의 버튼 역할을 하는 공통 코드인데, PageComponent의 매개변수 값으로 pageResponse, changePage를 사용하기위해 interface로 정의하였고, 이는 TodoList에서 사용될 예정이다.

---

2-4. ResultModal.tsx

interface ResultModalProps {
    msg: string;
    callback:() => void
}


function ResultModal({ msg, callback } :ResultModalProps) {
    return (
        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50">
            <div className="bg-orange-500-600 p-8 rounded-lg shadow-lg w-96">
                <h2 className="text-xl font-semibold mb-4">Result</h2>
                <p className="mb-6">{msg}</p>
                <button className='bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-500'
                        onClick={() => callback()}
                >
                    cancel
                </button>
            </div>
        </div>
    );
}

export default ResultModal;

👉 해당코드는 input 페이지에서 등록버튼을 눌렀을때, 몇번이 등록이되고, callback을 하여 input 내부의 코드를 초기화 시켜주는 코드이다.

---

2-5. TodoIndex.tsx

import TodoList from "./TodoList.tsx";
import {ReactElement, useState} from "react";
import TodoInput from "./TodoInput.tsx";

function TodoIndex(): ReactElement {

    const [page, setPage] = useState(1);
    const [refresh, setRefresh] = useState(false);
    const changePage = (pageNum: number) => {
        setPage(pageNum);
        setRefresh(!refresh);
    }

    return (
        <div className='flex flex-col'>
            <TodoInput changePage={changePage}></TodoInput>
            <TodoList pageNum={page} refresh={refresh} changePage={changePage}></TodoList>
        </div>
    );
}

export default TodoIndex;

👉 해당 코드는 TodoInput, TodoList의 부모컴포넌트의 역할을하고, page와 관련된 page, refresh를 list가 아닌 부모컴포넌트에 빼뒀는데, 이 이유가 매우 중요하다.

📌 기본적으로 TodoList에서 페이지 구현을 하기 때문에 페이지와 관련된 소스코드들을 List태그내부로 넣게 되는데, 이렇게 되면 페이지와 관련된 기능을 List에서 밖에 사용하지 못한다. 고로, Input 태그내에서는 페이지 이동이 불가능하다.

📌 Input에서는 페이지 이동이 필요없다고 생각할 수 있지만, 등록버튼을 누르고나서 기본적으로 1페이지로 가는것이 일반적이다. 그러므로 해당 기능과 같이 어디쪽에 기능을 부여하는것이 애매하다면 부모쪽으로 부여하는것이 타당하다.

👉 return내부에서는 TodoInput에서는 1페이지로 가는 기능이 필요하므로 changePage의 기능을 부여하고, List페이지에서는 page와 관련된 모든 기능들을 부여한다. - 이렇게 부여하는것을 props의 형태로 부여하는것이다.

---

2-6. TodoInput.tsx

import {ITodo} from "../../type/todo.ts";
import React, {ChangeEvent, useState} from "react";
import {postTodo} from "../../api/TodoAPI.ts";
import LoadingComponent from "../common/LoadingComponent.tsx";
import ResultModal from "../common/ResultModal.tsx";

const initState: ITodo = {
    title : '',
    writer : '',
    dueDate : '',
}

interface TodoInputProps { // input 버튼 이후에 1번페이지 이동하기 위해서
    changePage: (p:number) => void
}

function TodoInput({changePage}:TodoInputProps) {

    const [todo, setTodo] = useState<ITodo>({...initState}) // 기본값을 initalState
    const [loading, setLoading] = useState(false);
    const [resultData, setResultData] = useState<number>(0); // api에 post를 통해 등록되고 return되는 mno값을 저장하기 위한 상태

    const handleChange=  (e:ChangeEvent<HTMLInputElement>) => { // 사용자가 입력한 값에 대한 이벤트
        //console.log(e)
        //console.log(e.target)
        console.log(e.target.value);
        console.log(e.target.name);


        todo[e.target.name] = e.target.value

        setTodo({...todo})
    }

    const handleClick = () => {
        setLoading(true)

        postTodo(todo).then(number => {
            setLoading(false)
            setResultData(number) // 등록완료되고 return되는 mno값을 ResultData에 주입
        })
    }

    const clearResult=() => {
        setResultData(0) // resultData 값을 초기화
        setTodo(initState) // input 내용 초기화
        changePage(1) // 1번페이지로 이동
    }

    return (
        <div className="flex flex-col space-y-4 w-96 mx-auto">

            {loading && <LoadingComponent></LoadingComponent>}

            {resultData !== 0 && <ResultModal msg={`${resultData}번 등록완료`} callback={clearResult}/> }

            <label className="text-sm font-semibold text-gray-700">Title</label>
            <input
                type="text"
                name="title"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.title}
                onChange={e => handleChange(e)}
            />

            <label className="text-sm font-semibold text-gray-700">Writer</label>
            <input
                type="text"
                name="writer"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.writer}
                onChange={e => handleChange(e)}
            />

            <label  className="text-sm font-semibold text-gray-700">DueDate</label>
            <input
                type="date"
                name="dueDate"
                className="border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300"
                placeholder="Enter Title"
                value={todo.dueDate}
                onChange={e => handleChange(e)}
            />
            <button
                type="submit"
                className="bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 transition duration-300"
                onClick={handleClick}
            >
                Submit
            </button>
        </div>
    );
}

export default TodoInput;

👉 해당코드는 input페이지로 input 태그에 들어가야할 내용은 iniState로 빈 객체의 형태로 구현해놓는다. 이렇게 해놓으면 나중에 callback함수를 사용하여 이전에 작성했던 내용을 초기화 할 수 있다.

👉 TodoInput 내부의 useState가 3개있는데, 각각을 살펴보자면 todo는 우선 input 태그에 입력한 ITodo객체의 형태로 저장되고, APIPost를 통해 서버통신을 하는것이다.
loading은 기본 false로 되어있는데, loading(true)일때 Loadingcomponent가 적용되어 로딩화면이 잠시 출력이 되는 역할이고, resultData는 API의 POST를 통해 INPUT의 내용이 저장이 되었고, return값으로 mno인 number값을 받게되는데 이 number값을 저장하게될 상태가 resultData이다. resultData를 통해서 modal창에서 사용하게 된다.

---

2-7. TodoList.tsx

import React, {ReactElement, useEffect, useState} from "react";
import {IPageResponse, ITodo} from "../../type/todo.ts";
import {getTodoList} from "../../api/TodoAPI.ts";
import LoadingComponent from "../common/LoadingComponent.tsx";
import PageComponent from "../common/PageComponent.tsx";

const initalState: IPageResponse = {
    content : [],
    first: false,
    last: false,
    number: 0,
    size: 0,
    totalElements: 0,
    totalPages: 0
}

interface TodoListProps{
    pageNum: number;
    refresh: boolean;
    changePage: (p:number) => void
}

function TodoList({pageNum, refresh, changePage} : TodoListProps): ReactElement {


    const [pageData, setPageData] = useState<IPageResponse>(initalState);
    const [loading, setLoading] = useState(false);

    useEffect(() => {

        setLoading(true);

        getTodoList(pageNum).then(data => {
            setPageData(data)
            setTimeout(()=> {
                setLoading(false) // 데이터 받고 로딩창꺼짐
            }, 600)
        })

    },[pageNum, refresh]);

    const TodoLI = pageData?.content?.map((todo:ITodo)=>{
        return (
            <li key={todo.mno}>
                {todo.mno} -
                {todo.title} -
                {todo.writer} -
                {todo.dueDate}
            </li>
        )
    })



    return (
        <div>
            {loading && <LoadingComponent></LoadingComponent>}
            <ul>
                {TodoLI}
            </ul>
            <div>
                <PageComponent pageResponse={pageData} changePage={changePage}></PageComponent>
            </div>
        </div>
    );
}

export default TodoList;

👉 useState의 첫번째는 pageData로 api의 get을 통해 서버에서 데이터를 가져와 setPageData에 해당 data값을 넣어 pageData로 출력한다.

👉 useEffect의 역할은 조건이 변할때만 랜더링을 하는것인데, pageNum, refesh객체 처럼 두개중 하나가 변경이 되면 해당 메소드가 실행되는 것.

---

3. useEffect

👉 조건이 변할때만 랜더링(페이지 번호가 변경될때만)

busy waiting
👉 나쁜예로 busy waiting을 설명하자면, 해당 데이터가 왔는지 안왔는지 계속 체크 하기위해 while문을 넣어서 비동기 코드가 도착하면 랜더링이 되도록 무한루프를 도는것이다.

👉 이러한 무식한 방법을 사용하지 않기 위해서 useEffect를 사용한다.

useEffect(() => {

        setLoading(true);

        getTodoList(pageNum).then(data => {
            setPageData(data)
            setTimeout(()=> {
                setLoading(false) // 데이터 받고 로딩창꺼짐
            }, 600)
        })

    },[pageNum, refresh]);

👉 pageNum || refresh객체가 변하게 되면 코드가 실행됨

---

4. useCallBack

👉 페이지를 실행할때마다 메소드를 계속 실행해야하는것을 막기위함.

const clearResult=() => {
        setResultData(0) // resultData 값을 초기화
        setTodo(initState) // input 내용 초기화
        changePage(1) // 1번페이지로 이동
    }


{resultData !== 0 && <ResultModal msg={`${resultData}번 등록완료`} callback={clearResult}/> }

👉 등록버튼을 누르고 이전에 사용했던 내용을 자동으로 초기화 시키는 기능을 위함.

---

5. useMemo

👉 장바구니의 내용이 변경되었을때 총합을 다시 계산해야한다면 사용되는 코드

function MyComponent({ items }) {
    const expensiveCalculation = (data) => {
        // 복잡한 계산
        return data.reduce((acc, item) => acc + item.value, 0);
    };

    const memoizedValue = useMemo(() => expensiveCalculation(items), [items]);

    return <div>{memoizedValue}</div>;
}

---

6. useRef

function TodoInput() {

    const selectRef = useRef();

    const handleClick = () => {

        console.log(selectRef.current)

    }

    return (
        <div>
            <select ref={selectRef}>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
                <option value='5'>5</option>
            </select>

            <button onClick={handleClick}>GET</button>
        </div>
    );
}

👉 useRef를 통해서 select버튼을 만들어 놓고

import TodoList from "./TodoList.jsx";
import TodoInput from "./TodoInput.jsx";

function TodoIndex() {
    return (
        <div>
            <div className='text-4xl'>Todo Index Component</div>

            <TodoInput></TodoInput>

            <TodoList></TodoList>

            <TodoInput></TodoInput>

        </div>
    );
}

export default TodoIndex;

👉 Index컴포넌트에서는 Input을 두번 호출한다. 이때 select는 하나의 메소드지만 호출시에 name, id와 같은 구별할수있는 방법이 없는 상태이지만 useRef를 통해서 각각의 별도의 값을 얻어낼 수 있다.

---

7. useContext

👉 vue에서의 provide inject와 같이 컴포넌트간에 상태를 공유해주는 기능

7-1. CountButtons.jsx

import {useContext} from "react";
import {CountContext} from "./CountIndex.jsx";

function CountButtons() {

    const {changeCount} = useContext(CountContext);

    return (
        <div>
            <button onClick={changeCount}>PLUS</button>
        </div>
    );
}

export default CountButtons;

7-2. CountDisplay.jsx

import {useContext} from "react";
import {CountContext} from "./CountIndex.jsx";

function CountDisplay() {

    const {count} = useContext(CountContext);


    return (
        <div className="text-4xl">
            {count}
        </div>
    );
}

export default CountDisplay;

7-3. CountIndex.jsx

import CountButtons from "./CountButtons.jsx";
import {createContext, useState} from "react";
import CountDisplay from "./CountDisplay.jsx";

export const CountContext = createContext() // context생성하여 다른 컴포넌트에서 CountContext라는 이름으로 사용된다.

function CountIndex() {

    const [count, setCount] = useState(0);

    const changeCount = () => {
        setCount(count+1);
    }


    return ( // Provider를 통해서 하위 컴포넌트로 전달한다.
        <CountContext.Provider value={{count, changeCount}}>
            <CountDisplay></CountDisplay>
            <CountButtons></CountButtons>
        </CountContext.Provider>

    );
}

export default CountIndex;

👉 createContext를 통해 useContext를 생성하고, return값의 컴포넌트를 할당하는곳에서 CountContext.Provider의 형태의 태그로 할당할 컴포넌트들을 감싼다.

👉 이렇게 되면 count변수, changeCount메소드들을 다른 컴포넌트간에 상태를 공유 할 수 있다.

👉 물론 이때까지한 부분도 상태공유지만 그것들은 props의 형태이고 이것은 provider를 통해 공유하는 방법이다.