react formdata 리스트

const [page, setPage] = useState(1);
const [size, setSize] = useState(10);
const [datas, setDatas] = useState([]);
 
 const getData = async () => {
    formData.delete("page");
    formData.delete("size");
    formData.set("size", size);
    formData.set("page", page);

    await axios({
      method: 'post',
      url: `${REACT_APP_BASE_URL}/api/v1/GET_List`,
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      setDatas(res.data.List.content);
      setTotalPage(res.data.List.totalPages);
    }).catch(err => console.log(err));
  }

formData의 필수 키 값을 set에 넣어준다.

{datas.map((data, i) => {
  return (
   <li key={data.articleIdx} onClick={() => { Edit(data) }}>
     <h1>{data.subject}</h1>
      <span>{data.content}</span>
   </li>
   )
})};

이렇게 하면 리스트 값을 불러 올 수 있다
게시물을 누르면 수정하기 위해 Edit(data)로 data를 받아온다.

const [articleIdx, setArticleIdx] = ('');
const [subject, setSubject] = ('');
const [content, setContent] = ('');

const Edit = (data) => {
	// 수정 창 모달
    setDialog(true);
    
    // 미라 만들어 둔 state값에 data값을 넣어준다
    setArticleIdx(data.articleIdx);
    setSubject(data.subject);
    setContent(data.content);
}

{dialog ? 
	<>
	 <label>제목</label>
      <input value={subject} onChange={e => setSubject(e.target.value)} type="text" />
     <label>내용</label>
      <input value={content} onChange={e => setContent(e.target.value)} type="text" />
	</>: ''}

파일이면
onChange={e => setFile(e.target.files[0])}

value에 subject 값을 넣어 내가 입력했던 값을 미리 볼 수 있다.
onChange={e => setSubject(e.target.value)} 을 넣어줌으로 다시 값을 수정 된 값으로 변경 시켜준다.

<button onClick={() => Save()} type="button">
   저장
</button>
<button onClick={() => Cancel()} type="button">
닫기
</button>

cancel()

const Cancel = () => {
  setdialog(false);
  initVariables();
}

const initVariables = () => {
   setArticleIdx('');
   setSubject('');
   setContent('');
}

값을 지워줌 간단.

Save()

const Save = () = {
   formData.set("articleIdx", articleIdx);
   formData.set("subject", subject);
   formData.set("content", Content);
   
   saveData(formData);
   setDialog(false);
}

formData에 값을 넣어주고 saveData를 호출한다

saveData()

const saveData = async (formdata) => {
	await axios({
    	method: 'post',
        url: `${REACT_APP_BASE_URL}/api/v1/SET`,
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
    }).then((res)=> {
        getData();
    }).catch((err)=> {
    	console.log(err);
    })
    initVariables();
}

이런 기초적인 것도 헤매는 나... ㅜ