저는 강의를 안본 상태에서 혼자 과제 코드를 작성할 때,
배열을 ... 을 사용해서 분해하고 새로운 배열을 만드는 문법을 모르고 있는 상태라서,
강의 초반에 알려주신 state변경함수로 배열state를 수정하는 방법으로 작성을 했거든요
제가 이해한 대로면, 제가 작성한 코드가 정답 코드에 비해 조금 더 길 뿐
결과적으로 state에 담겨있는 데이터는 같고 화면에도 똑같이 HTML이 생성되어야 한다고 생각하는데
제가 작성한 코드는 console.log를 찍었을 때 데이터는 제대로 6개로 추가된 것으로 나오지만
화면에는 HTML이 생성되지 않구요
정답 코드는 console.log를 찍었을 때 데이터는 3개(기존 데이터)만 있는걸로 출력되고
화면에는 HTML이 생성되는 차이가 있네요 ...
어떤 방식으로 접근해야 하는지 까지는 정답 코드와 동일하게 잘한 것 같아서 그냥 넘어갈까 했지만
아무리 코드를 곰곰히 쳐다봐도 왜 이렇게 다른 결과가 나오는건지 이해가 되지 않아 질문 남겨봅니다
<button className="btn btn-primary" onClick={()=>{ axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
let newArray = shoes;
result.data.map((a,i)=>{
newArray.push(result.data[i]) })
shoes변경(newArray); })
}}>더보기</button>
이게 제가 작성한 코드인데, 기존 데이터를 ...으로 분해하고 서버에서 가져온 데이터도 ...으로 분해해서 state변경 함수로 담는 과정을 방법만 다르게 구현했다고 생각합니다.
임시 배열을 만들어서 기존 데이터를 담아두고, 서버에서 가져온 데이터에 map을 적용해서 임시 배열(기존 데이터를 담아둔) 뒤에 push방식으로 새로 받아온 데이터 배열의 값들을 추가해줬습니다.
state변경함수 바로 뒤에 console.log를 찍어봐도 배열[0]~배열[5] 까지 6개 데이터가 제대로 담겨져 있다고 나옵니다.
그런데 화면에 HTML은 생성되지 않습니다...
반대로 정답 코드는 화면에 HTML이 제대로 생성되는데 console.log찍었을 때는 데이터가 3개만 있는걸로 나오구요 왜 이런 차이가 나오는 걸까요..?
