React 경고 메시지: DOM 요소에 유효하지 않은 속성 전달 방지하기

경고 메시지 정의: "React에서 사용자 정의 컴포넌트에 정의되지 않은 props가 DOM 요소로 전달될 때 발생하는 경고로, 이는 React가 유효하지 않은 HTML 속성을 감지했음을 의미한다."

이 메시지는 React와 같은 라이브러리에서 사용자 정의 컴포넌트에 정의되지 않은 속성을 DOM 요소로 전달하려고 할 때 발생할 수 있습니다. 이 경우, btncolor라는 속성이 DOM에 직접 전달되지 않아야 하지만 전달되고 있어 경고가 발생한 것입니다.

 

수정 전 코드

let YellowBtn = styled.button`

    background : ${ props => props.btncolor };

    color : ${ [props => props.btncolor == 'blue' ? 'white' : 'black']};

    padding : 10px;

`

function Detail(props){

    return(

             <YellowBtn btncolor="blue">노랑버튼</YellowBtn>

    )

}

속성 전파 (Prop Forwarding): 사용자 정의 컴포넌트에서 props를 전달받아, HTML이나 기본 DOM 요소로 직접 전달할 때, React는 유효한 HTML 속성이 아닌 것이 발견되면 경고를 발생시킵니다.

여기서 btncolor는 HTML button 요소에 대한 유효한 속성이 아닙니다. 따라서 React는 이 속성을 DOM으로 전달하지 말라는 경고를 표시합니다.

해결방법 중 하나 : 일시적인 속성 (Transient Props) : 속성 이름에 $를 추가하는 방식이 있습니다. 이렇게 하면, styled-components나 emotion과 같은 라이브러리에서는 $로 시작하는 props를 자동으로 필터링하여 DOM으로 전달하지 않습니다.

 

수정 후 코드 

let YellowBtn = styled.button`

    background : ${ props => props.$btncolor };

    color : ${ [props => props.$btncolor == 'blue' ? 'white' : 'black']};

    padding : 10px;

`

function Detail(props){

    return(

             <YellowBtn $btncolor="blue">노랑버튼</YellowBtn>

    )

}

 

이렇게 하면 콘솔창에 에러메세지가 뜨지 않는다!