[REACT] Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use an array instead.

 

 

---

React 오류 따라잡기

 

사건의 발달

 

 To do list 를 React로 만드는 중, 할 일을 입력한 후 버튼을 누르면 useState를 사용하여 내용을 업데이트 하려 했다. 

 

 addRef는 input의 현재 상태 값을 확인하기위해 useRef Hook을 사용하여 입력한 상황. 예상대로라면 addRef의 값이 업로드 되어야 하는데, 버튼을 누르면 홈페이지에는 경고창이 없이 하얀 페이지만 나오는 상황.

 console창에 들어가 경고를 확인 해보니 Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use an array instead. 라는 경고창이 나와 keys값이 일정하지 않은 것인가 해서 확인했으나 실패. 방법을 모른체 헤매다가 원인을 발견했다.

 

문제 원인

 

 데이터를 화면에 표시할때, 새로 전달된 데이터와 표시하려는 데이터의 타입 이 일치해야 한다. 원인을 해결하니 문제가 바라 보였다. addRef자체는 입력된 값을 나타내 주지 않는다.  

 

 

 addRef.current.value로 수정해주니 입력됐다. 이렇게 당연히 안다고 생각하는 부분들이 틀리면 해결하는데 오랜 시간이 걸린다. 항상 조심하자.