[TIL_포켓몬 도감_트러블슈팅(1)] 2/3

1. return 했는데 왜 추가하니?

나의 카드가 6개 보다 많으면 return하게 해서, return이 된다 근데 추가도 된다,,,?

처음에는 7번 코드처럼 return alert()이었는데, 그래서 안되나 싶어서 (그럴리가 없지만) 다 빼고 중괄호도 넣어서 return했는데도 안된다

하단의 화면 사진처럼 리턴되어서 밑의 리스트는 없어졌는데(이건 또 왜 그런지,,,ㅜ), myCards는 추가되어서 7개인 것을 볼 수 있다

는 너무 바보같았음을,,,,,,,그저 함수 밖에 있었기 때문인 것을,,,,,,,,,,,,,

---

2. type="button"의 역할이란 무엇일까?

왼쪽의 <button>부분과 오른쪽의 <button> 부분은 같은 코드였다

오른쪽의 코드를 복붙했기 때문이다

이유가 뭘까?

 

검색을 해보니 form 태그 안에 타입을 명시해주지 않은 버튼은 기본 submit으로 지정이 되고,

button으로 타입을 명시해주어도 새로고침이 일어난다!

이때, event를 받아서 e.preventDefault()를 해주면 새로고침을 막을 수 있다

 

나는 data.id를 넘겨줘야 하기 때문에 event를 넘겨줄 수 있나? 하면서 생각하고도 안 했는데,

혹시 같이 넘겨주고 e.preventDefault()하면 새로고침을 막을 수 있을까 하고 해보니까 된다!

 

하지만 input이 없기 때문에 굳이 form을 쓸 필요가 없어서 form의 스타일컴포넌트를 div로 변경해주고 타입도 뺐다

이제 새로고침 되지 않고 삭제를 눌렀을 때 id 값이 잘 나오는걸 볼 수 있다

---

휴 오늘은 바보같은 실수도 많이 했지만

확실히 리엑트 입문주차 때 여러번 반복했어서 그런지 생각보다 쉽게 과제가 풀리고 있어서 재밌고 뿌듯했다

반복, 복습이 중요하다는걸 다시금 깨닫게 된다

필수 기능은 거의 구현했고 내일 변수명과 중복되는 부분들은 어떻게 함수로 뺄 수 있을지 생각해봐야겠다