TIL_간단한 여행 플래너(?) 제작기_세번째

#오늘 할 일 (19.11.09)📚

여행 리스트에 아이템 추가할때 발생하는 에러 수정하기

- 버튼 여러번 누르면 warning 발생

- 확인 버튼을 눌렀을 때, 값이 업데이트 되지 않는 이유?

-(번외) commit을 했는데 잔디가 안 심어지는 이유?

 

# 문제 발생 🤮

▪버튼을 여러번 누르면 warning?

   버튼을 여러번 누르면 key값이 'NaN'인 아이템이 중복된다는 warning이 개발자 도구에 찍혔다. 분명 나는 새로운 아이템이 추가될 때마다 컴포넌트에 id++로 key 값에 id를 주었는데, 왜 key 값이 NaN(숫자아님) 이 나오는 걸까?

.

.

알고보니, id++를 하면서 각각 고유의 값을 key로 부여하긴 했지만 초기 id값을 설정하지 않았다. 없는 값에 +연산을 하려다보니 NaN 가 발생한 것이다. App.js 상단에 id 값을 초기화 해주었더니 warning은 사라졌다.

 

---

 

▪확인 버튼을 눌렀을때, 값이 업데이트 되지 않는 이유?

   확인 버튼을 눌렀을 때 입력폼에서 입력한 값들이 하단의 리스트에 반영되어야 한다. 이를 구현하기 위해서 각 input 박스들은 변화를 감지하고, 변화가 일어날 때마다 state에 값을 업데이트 해준다. 그리고 확인 버튼을 눌러 최종 state 값을 리스트로 넘기는 형식이라고 할수 있겠다.

 

그런데, 내가 구성한 입력폼에는 이미지의 변화도 감지할 수 있어야 한다. 사용자가 작성하고자 하는 리뷰항목에 따라 이미지가 바뀌기 때문이다. (식당, 명소, 숙소...)

보통은 onChange 태그를 이용하여 input 값들의 변화를 감지 했지만. 이미지 태그 <img>에서는 사용할 수 없었다. 그래서 이미지의 변화를 감지할 수 없었고, 변화를 감지 할 수 없었기 때문에 state에서도 업데이트가 되지 않았던 것이다.

 

이미지의 변화를 감지하기 위한 방법을 서치를 해본 결과, 이미지를 동적으로 생성할 때는 onLoad를 사용한다는 사실을 알게 되었고, 이를 적용해보니 이미지에 대한 변화도 잘 감지하여 업데이트가 제대로 되었다! 

 

---

 

▪왜 잔디가 심어지지 않았는가?

    지금까지 했던 commit이 잔디밭에 반영되지 않았다. 그 이유는 무엇일까......내 commit......

github에 작성한 내 email 정보와, 로컬에서 push를 날리는 .git에서 사용되는 email정보가 같아야된다고 한다. 나의 경우는 로컬의 .git에 저장되어있는 email 정보에 오타(....)가 있었다.. 그래서 지금까지의 커밋이 반영되지 못했다......... 앞으로는 이런 부분들도 신경써서 확인해야겠다.......😭