form에 action 과 name으로 데이터 전송

[김민규]

선생님 안녕하세여 제가 React강의를 보고 Node강의를 보는데 여기선 html을 이용해서 <br />
<from action=”/add” method=”POST”> 이런식으로 데이터 전송을 해주잖아여 html에서는
React에서 로그인 창을 만들어주려고하는데 구글링해보니가 onSubmit 함수를 만들어서 거기서 redux-saga 비동기로 디스패치 해주면서 어쩌고 저쩌고 하면서 보내주더라구여 react와 node 서버 연결해줬다 치고 질문드리고 싶은게

1. html에서  form 태그를 걍 리액트에서 input에 onSubmit함수를 만들어서 value 보내면서 처리하면 대체가능한지? 아님 리액트에도 form 태그는 필순지? 궁금하구여

2. 번외로 js문법 질문이긴한데 제가 외부 api를 axios.get으로 json형식으로 받았는데 이게 대충
{lat: 37.5, lon: 127.12, timezone: “Asia/Seoul”, timezone_offset: 32400, current: {…}, …}
current: {dt: 1601132986, sunrise: 1601155405, sunset: 1601198492, temp: 290.03, feels_like: 287.82, …}
daily: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
hourly: (48) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]<
lat: 37.5
lon: 127.12
minutely: (61) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
timezone: “Asia/Seoul”
timezone_offset: 32400
__proto__: Object

이런식으로 왔다고 치면 response.data.어쩌고.저쩌고 하면서 내부요소 접근해주고있는데 좀 깊게 들어가면 undefind가 뜨면서 못찾더라구요 특히 내부요소의 요소중 배열[0].어쩌고 하면 제가 몇주 째 구글링을 해봤는데도 몰라가지고 여기다가 질문 올립니다 감사합니다

[codingapple]

1. 리액트 웹앱에선 form 태그를 이용해 전통적으로 HTTP 요청하는 방법은 잘 쓰지않습니다. 새로고침없이 AJAX로 서버와 데이터를 주고받습니다. input이랑 버튼 달랑 하나 만들어서 AJAX POST 요청하면 서버로 데이터보내기 끝입니다. 

2. 콘솔창에선 찾을 수 있는데 출력하면 안나오는 이유는 오타가 났거나 데이터를 제대로 못꺼냈거나 아니면 리액트에서 {데이터바인딩}할 때 array나 object를 그대로 데이터바인딩해버렸을 경우나 그런 경우밖에 없습니다. 

아니면 ajax 데이터 수신하는 코드를 .then( ()=>{ 여기 } ) 안에 작성을 안했거나 그럴 수도 있겠네요. 

[글쓴이]

글