문제
프론트에서 API를 호출해서 화면에 렌더링을 하던 중
API 주소를 찾을 수 없다는 404오류가 자꾸 발생했다 ㅠㅠ
콘솔창을 살펴본 결과 API 주소를 요청할 props가 멀쩡하다가 갑자기 NaN과 undefined로 변경되는 오류였다 ㅜㅜ
1번째 시도 styled-componets 경고 해결하기
위의 이미지에서 props 값이 변경될 때 중간에
styled-componets 경고가 있길래 저 경고부터 해결해보기로 했다.
[오류 내용]
Button.tsx:21 styled-components: it looks like an unknown prop "scheme" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)구글링을 해본 결과 styled-components로 스타일링된 컴포넌트 prop이 컴포넌트에 전달되지 않고 HTML 요소에 전달 되고 있다는 경고였다.
해당 경고문에서는 <StyleSheetManager shouldForwardProp={...}> 이걸 통해 해당 동작을 선택하거나 자동 필터링을 위해 '$' 접두사를 붙이라고 나와있었다.
후자의 경우가 더 간단한 거 같아서 일단 경고가 난 부분에 $ 접두사를 붙여 보았다.
$ 접두사를 붙이는 행위는 스타일에 영향을 주는 속성 이라는 뜻이라고 한다.
즉 정적인 스타일이 아닌 동적인 스타일에 적용해주면 되는 것!!
결과는 API 요청이 성공적으로 이루어졌다 ㅎㅎ
🤔후기
일단 개인적으로 첫번째 시도만에 문제를 해결해서 기분이 좋다 ㅎㅎ
솔직히 콘솔창에 에러가 아닌 경고 문구고 그동안은 문제없이 동작해서
해당 문구를 무시하고 있었는데 이것때문에 오류가 발생했다는 게 충격적이다 ㅠㅠ
그래도 해결하는 과정에서 $ 접두사와 styled-components 오류에 대해 하나 더 알게된거 같아 기쁘다
앞으로는 경고도 무시하지 않고 바로 바로 해결해주는 습관을 가져야 겠다.
