Product - Router

9.25 (수)

1. useCallBack

👉 useCallback은 함수를 메모이제이션하여, 값이 변경되지 않는 한 이전에 생성된 함수를 사용. input태그에서 이벤트를 사용한것은 한 글자씩 작성할 때마다 handleChange메소드가 호출되어 상태를 업데이트하는데, usecallback을 이용하면 handleChange가 같은 참조를 가지는 메모이제이션역할을 한다.

function TodoAddComponent() {

 const handleChange = useCallback((e:ChangeEvent<HTMLInputElement>) => {

        // @ts-ignore
        todo[e.target.name] = e.target.value
        setTodo({...todo})
   	 },[])
    
 return (
 <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)}
            />
            )
 
    }
  

---

2. formData

2-1. ProductAddPage.tsx

import {ChangeEvent, useRef, useState} from "react";
import {postAdd} from "../../api/productAPI.ts";

const initialState = {
    pname: '',
    pdesc: '',
    price: '',
}


function ProductAddPage() {

    const [product, setProduct] = useState({...initialState}) // 초기값이 없으면 에러가 발생할수있으므로 복사본 넣기
    const filesRef = useRef<HTMLInputElement>(null) // id,name을 사용하는 대신에

    const handleChange = (e:ChangeEvent<HTMLInputElement>) => {
        product[e.target.name] = e.target.value
    }

    const handleClick = () => {

        const files = filesRef.current.files // 등록한 파일에 대한 정보

        console.log(filesRef)

        const formData = new FormData() // 파일 업로드와 텍스트 데이터를 동시에 처리하기위해 일반적인 json객체를 사용할 수 없다.

        formData.append("pname", product.pname)
        formData.append("pdesc", product.pdesc)
        formData.append("price", product.price)

        for(let i=0; i<files.length; i++) {
            formData.append("files", files[i])
        }

        postAdd(formData).then(data =>{
            console.log(data)
            filesRef.current.value = null
        })


    }


    return (
        <div>
            <div>Product Add Page</div>

            <div>

                <input type='text' name='pname' placeholder='Product Name' onChange={(e) => handleChange(e)}/>
                <input type='text' name='pdesc' placeholder='Product Desc' onChange={(e) => handleChange(e)}/>
                <input type='number' name='price' placeholder='1000' onChange={(e) => handleChange(e)}/>
                <input type='file' ref={filesRef} name='files' multiple={true}/>

                <button onClick={() => handleClick()}>ADD</button>

            </div>

        </div>
    );
}

export default ProductAddPage;

👉 기본적으로 input 태그를 이용한 add페이지에서는 useState를 이용한 상태객체에 handleChange 메서드를 이용하여 product[e.target.name] = e.target.value 이것처럼 넣어서 api서버에 prodcut객체를 전달하는 방식을 사용했지만, 첨부파일이 들어가는 경우는 다르다

👉 우선 useRef를 사용하게 되면 filesRef.current.files 해당 속성을 이용하여 등록한 파일에 대한 정보를 가져올 수 있다. 이 정보는 input태그내에 file type에 ref={filesRef}를 이용하여 input태그의 file속성을 뜻한다. 몇개의 파일을 첨부했는지와 같은 정보를 가져올수도 있다.

👉 이후에는 formData 객체를 생성해야하는데, 이는 파일업로드와 텍스트 데이터를 동시에 처리하려면 일반적인 json 객체를 사용할 수 없기 때문에 텍스트 데이터는 formData객체에 append로 각각 붙혀주고 file같은 경우에는 filesRef의 file개수를 이용하여 몇개인지 파악하여 file을 append해준다.

👉 마지막으로 api서버 호출하여 post를 해준뒤에 filesRef.current.value = null 이 코드는 이전에 입력한 file을 지워서 다음 post시에 편하도록 비워주는 역할을 한다.

2-2. ProductAPI.ts

import axios from "axios";


const host:string = 'http://localhost:8089/api/products'

const header = { //post방식에서는 사용하지 않아도 되지만, put에서는 사용해야한다.
    headers: {
        'Content-Type': 'multipart/form-data', // 파일 전송 형식 지정
    }
}

export const postAdd = async (formData: FormData): Promise<number> => {

    const res = await axios.post(`${host}/`, formData)
    return Number(res.data.result) // 등록시에 result와 순번값이 나오므로 data.result이고 타입은 number

}

👉 API 또한 매개변수에 파일이 포함되어있으므로 타입을 formData로 설정한다.