[React] Styled-Components로 만든 요소의 선언 위치에서 발생하는 경고

⛑ 작업자

→ 작업 기간 : 2022년 7월 

💡 원인

→ 렌더링 하는 함수에 styled 컴포넌트를 선언

🗡 해결

→ styled 컴포넌트를 함수 밖으로 꺼냄!

진행하는 프로젝트의 모달창의 textarea 부분에서 경고 발생하였다!

“You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.”

원인은 컴포넌트 렌더링 함수에서 const 변수명 = styled.textarea`스타일` 선언해둬서 그런 것!

 

경고 코드는 아래와 같다 ㅠㅠ

react_devtools_backend.js:4026 The component styled.textarea with the id of "sc-bhVIhj" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component. 
    at ContentMyinfoInner (http://localhost:3000/static/js/bundle.js:7164:5)
    at section
    at O (http://localhost:3000/static/js/bundle.js:329262:6)
    at ContentMyinfoMain (http://localhost:3000/static/js/bundle.js:7444:5)
    at GroupItem (http://localhost:3000/static/js/bundle.js:6901:5)
    at Group (http://localhost:3000/static/js/bundle.js:6883:5)
    at section
    at O (http://localhost:3000/static/js/bundle.js:329262:6)
    at ContentBody (http://localhost:3000/static/js/bundle.js:6913:5)
    at div
    at O (http://localhost:3000/static/js/bundle.js:329262:6)
    at Profile
    at Routes (http://localhost:3000/static/js/bundle.js:314984:5)
    at Router (http://localhost:3000/static/js/bundle.js:314917:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:313726:5)
    at Router
    at Fe (http://localhost:3000/static/js/bundle.js:329173:60)
    at App (http://localhost:3000/static/js/bundle.js:93:72)
    at RecoilRoot_INTERNAL (http://localhost:3000/static/js/bundle.js:323310:5)
    at RecoilRoot (http://localhost:3000/static/js/bundle.js:323476:5)

 

컴포넌트 함수 내부에 스타일을 선언한 것이 원인

이를 끄집어 내서 다른 styled 컴포넌트와 함께 맨 위에 위치시켜주었다!

 

그 다음부터는 뜨지않는다!