Typescript Error) Objects are not valid as a React child

프로젝트를 진행중 리액트 + 타입스크립트 조합을 사용하면서 만난 Objects are not valid as a React child라는 에러

 

에러 내용을 자세히 보면 문자열이 아닌 객체를 랜더링 하려고 하기 때문에 난 오류라는 것을 알 수 있다

 

처음에는 새빨갛고 긴 에러가 나와서 당황한 나머지 에러내용을 자세히 보지 못하고 바로 에러 내용을 복붙해서 구글링을 했었다

그러나 내 상황을 정확히 해결해 줄만한 답변을 찾기 어려웠고 비슷한 해결책의 stack of flow들만을 찾을 수 있었다

 

그리고 그제서야 정신을 차리고 에러내용을 차근차근 보았다

 

name이라는 것이 랜더링 되려고 하는데 이것이 객체이기 때무에 난 에러였다

 

나는 프로젝트중 name라는 이름의 키가 포함된 객체를 만든적이 없기 때문에 더 찾기 어려웠는데 다른 팀원이 만든 객체에서 난 오류였다

 

그래서 vscode에 name을 검색해서 찾아보니 정말로 button에 name이라는 객체가 랜더링이 되려고 하기 때문에 나는 에러였다

 

해결방법은 간단하게 name을 객체가 아닌 문자열로 바꿔주는 것으로 해결!

 

에러 내용이 낯설고 길다고 자세히 보지 않은 나를 탓할 수 밖에 없는 상황이었다

 

다음부터는 에러가 나면 일단 스스로 에러내용을 자세히 살펴봐야 겠다는 깨달음을 얻었다