[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

TIL

▶ styled-component는 작성 위치가 정말 중요하다

---

 

[오류 증상]

styled-component를 적용시키고 나서 

input 박스에 입력시 속도가 매우 느리고 포커스가 나감

 

[확인]

개발자도구로 확인하니 콘솔창에 해당 warning 확인

 

[문제 파악]

찾아보니 styled-components로 만든 요소의 선언 위치 때문이라고함!

 

Header.jsx부분이 문제인것 같아 찾아보러감 >> 아니였음

styled component안에 직접적으로 작성한 함수가 문제였음

 

▼문제 코드 ▼

import React from 'react';

import styled from 'styled-components';

function WriteComments() {

    const StDivWrite = styled.div`

        background-color: #8dd2ef;

    `;

    const StFormWrite = styled.form`

        display: flex;

        flex-direction: column;

    `;

    return (

        <>

            <StDivWrite>

                <StFormWrite></StFormWrite>

            </StDivWrite>

        </>

    );

}

▶함수 밖으로 styled component 배치해야한다 = function WriteComment() 위에 작성해야한다.

 

[해결]

 

import React from 'react';

import styled from 'styled-components';

const StDivWrite = styled.div`

    background-color: #8dd2ef;

`;

const StFormWrite = styled.form`

    display: flex;

    flex-direction: column;

`;

function WriteComments({ comments, setComments }) {

    return (

        <>

            <StDivWrite>

                <StFormWrite></StFormWrite>

            </StDivWrite>

        </>

    );

}

 

끝.