[TIL_매달갯수사이트개발_트러블슈팅(3)] 1/23 에러의 연속이군아

1. button onClick 안에 넣은 함수가 새로고침이 일어날 때마다 자동으로 실행이 된다

버튼을 클릭했을 때만 함수호출을 한다고 생각했다

저 자리에 함수명을 적으면 그렇게 동작하지만 값을 넘겨주기 위해 괄호를 넣으니 호출이 되어버려서 함수의 리턴값을 넣어주게 된 것!

해결 방법은 호출 대신 선언식으로 넣어주면 된다

이렇게 정의만 해주고 나니 자동으로 호출하는걸 막을 수 있었다!

이유는 react가 처음 렌더링 할 때 모든 함수를 실행시켜서라고 한다 앞으로도 유의해서 쓸 것!

 

---

2. 삭제하면 빈 리스트가 생긴다

콘솔에 에러 메시지가 나오지도 않고 그저 값만 없는 빈 리스트가 추가되는 현상이 발생했다

처음에는 하단의 리스트와 같이 버튼도 넣어줬는데 안돼서 위로 옮겨보았고 여전히 같은 증상을 보이고 있다

 

문제 해결! 원인은 간단했다 하지만 중요한 문제였다

위에 올린 사진의 문제가 아니라 필터링해주는 함수에서의 문제였다

기존코드는 주석처리된 부분이었는데, 필터링한 배열을 기존의 배열과 같이 넣어주니 값은 빠져나간 빈 리스트가 생겼던 것!

그 사이에 list -> dict로 이름 바꿨는데 contry로 바꾸고 기존의 contry는 name으로 바꾸든지 해야겠다

새로 추가할 때는 기존의 배열도 나와야 하니 같이 넣어주는게 맞지만, 삭제는 없어져야 하니 필터링 된 배열만 넣어줘야 한다!

 

---

3. 버튼이 눌린 후 input값이 비워진게 화면에 리렌더링 되지 않는다

setCountryName("")로 비워줬고 실제로 비워진게 맞는데 화면에 반영되지 않는다

빈 값이 들어가면 경고창이 뜨는걸 보면 값이 비워졌다는걸 알 수 있는데 여전히 국가 입력칸에는 값이 남아있는걸 볼 수 있다

그리고 남아있는 값을 지우지 않고 추가로 입력하면 이전의 값과 더해져서 값이 들어간다 

input이랑 연결이 안 되어있는걸까?

 

 

흠,,,,결국 오늘 해결하지 못했다

그래도 내림차순으로 정렬하는것까지 저거 빼곤 기본 구현은 거의 다 한 듯 해서 뿌듯하다

너무너무 피곤하고,,,,,내일은 다시 컴포넌트 나누는걸 도전할 것!