react fetch API (create)

CRUD

프론트와 퍼블리싱의. 큰 차이는. 바로. 데이타.통신이다 ㅋ

그러나 나는.. 거의.. Read 밖에 하지 못했지
이번에 CUD. 박살.낸다
(그러나 언제나처럼 박살나는것은 나였다.)

CreateMSG.js

상위컴포넌트에서 prpos 값으로 theme ( icon & theme color )와 userID 를 전달 받는다.
최초 렌더링시에 해당 값들을 state 값에 보관해주자.

// userId는 초기값으로 -1을 주었다.
const [userId, setUserId] = useState(-1);
const [theme, setTheme] = useState(props.theme)

.
.
.

useEffect(()=>{ 
      var arr = location.pathname.split('/'); 
      setUserId(arr[2]);
      setCardId(arr[3]);
      setUserId(props.user)
    },[])

const onAddCard=(e)=>{
     
      console.log(config.ADD_CARD);

      var formData = new FormData();
        formData.append('user_id',userId);
        formData.append('content', 'admddkg');
 
      fetch(config.ADD_CARD, {
        method: 'POST',
        headers: {
             //  'Content-Type':'multipart/form-data',
                 'Accept':'application/json',
               redirect:'follow',
               },
        cache: 'no-cache',
        body: formData // body 부분에 폼데이터 변수를 할당
      })
      .then((response) => response.text())
      .then((data) => {
        console.log(data);
      })
      
<form>
 <input type='button' value='작성완료2' onClick={()=>onAddCard()}></input>
</form>
  
   

처음에 Button 컴포넌트에 link 로 바로 연결돼서 event listner 가 아닌 link 로 연결되어서 안됐고, 그 다음에는 전송시 body 값이 전달 안돼서 formdata 객체를 추가했더니 됐다.
우아~~!
지금은 formData.append(key, value) 값을 하드코딩으로 입력하여 데이터 수정하고 있으나
이제는 e.target.value 혹은 jquery, state 값으로 변경된 input 값을 state 값에 저장하고 이 값을 다시 formdata 에 전달하여 바꾸겠다.