What To Do
- 최상단 컴포넌트
<StoreListMap>에<Map>(지도 컴포넌트)와<StoreList>(가게 리스트 컴포넌트)가 있다. - 가게 리스트 컴포넌트에서 특정 가게를 클릭하면 지도에서 그 가게 위치를 센터로 잡을 수 있게 위도와 경도 정보를 넘겨주어야 한다.
- 전역상태에 추가해 놓지 않았기 때문에 이는 상태 끌어올리기로 동작하고 있다.
Error
- 최상단 컴포넌트에서
listclick이라는 함수를props로 내려서 상태 끌어올리기 함수를 동작시키고 있었는데 다음과 같은 에러가 발생하였다.
Warning:Invalid value for prop `listclick` on `<thread>` tag.
Either remove it from the element,
or pass a string or number value to keep it in the DOM.- 처음에는 심지어
listClick이라고 내려서 다 소문자로 만들라고 하길래 그렇게 바꿨는데도 콘솔 에러를 맞이하여 무엇을 잘못했는지 고심하고 있었다...
Solution
Custom attributes aren’t meant to hold functions.
They are meant to hold values.
Depending on how you want the logic,
you need to run your function in a lifecycle method for Class components,
or hook logic for functional components (such as useEffect).
Then what your function needs to do,
### is target the element and set the custom attribute with the value.- 이 말은 Custom attributes, 즉, 사용자가 생성한 속성같은 경우에는 어떠한 값(value)을 가져야하지 함수와 같이 동작하는 것들이 들어갈 수 없다는 뜻이었다.
- 어떤 때는 props로 함수를 전달해도 되고, 어떤 때는 props로 함수를 전달하면 콘솔에러가 나고... 차이가 무엇이지?! 하고 있었던 중에 깨달음...
- props로 뭔가를 내리는 게 익숙해서 그냥 다짜고짜 뭐든 다 내렸는데 이게 내가 만든 컴포넌트일 때는 당연히 CamelCase로 해서 내려줘도 되고, 함수를 바인딩해도 된다. 그러나! 그러나! 이것이 내가 만든 "컴포넌트"가 아니고 "기본태그" 그 자체일 때에는 이것이 콘솔에러를 만드는 것이었다!
- 컴포넌트 자체가 맨 마지막까지 내려가면 어쨌든 존재하는 기본태그들로 이루어져 있는데 여러 개의 컴포넌트들로 감싸져 있어서 내려가다 보면 어쩐지... 이것이 기본태그라는 것을 까먹고 "컴포넌트인데 왜 콘솔에러가 나지? 다른 데서는 나지 않는데?" 가 되어버렸다...
- 에러 핸들링 전 코드
<StoreList listclick={this.listClick} />- 에러 핸들링 후 코드
<StoreList onClick={this.listClick} />-
내가 만든 속성을 사용하지 않고 원래 있는 걸 사용했음 됐는데 괜히 추가했다가 콘솔에러만 만난 꼴이 되었다. 이것이 바로 긁어 부스럼?!
-
그러나 어쨌든 해결!
