[React] Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs.

skoh·2023년 2월 9일
0
  • 인프런 <따라하며 배우는 노드, 리액트 - 무비앱 만들기> 7강 듣는 중 발생한 에러



■ 에러 내용

영화 디테일 페이지에 들어가니 크롬 콘솔창에 이런 에러가 발생했다.

Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
in div (at MainImage.js:4)
in MainImage (at MovieDetail.js:30)
in div (at MovieDetail.js:26)
in MovieDetail (at auth.js:38)
in AuthenticationCheck (created by Context.Consumer)
in Route (at App.js:25)
in Switch (at App.js:21)
in div (at App.js:20)
in Suspense (at App.js:18)
in App (at src/index.js:29)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:28)
in Provider (at src/index.js:21)



■ 왜 에러?

강의를 듣다보면 이렇게 코드를 작성해주시는데,
이 쪽 스타일링이 너무 축약형이라.. 클라이언트가 구분하기가 어렵나보다.;;(멍충망충)




■ 해결 방법

아래처럼 풀어서 써주니 오류 해결.
복붙을 위해 이미지 아래에 코드형식으로 남깁니다.

return (
        <div style={{ background: `linear-gradient(to bottom, rgba(0,0,0,0)
        39%, rgba(0,0,0,0)
        41%, rgba(0,0,0,0.65)
        100%)`,
        height: '500px',
        backgroundImage: `url('${props.image}')`,
        backgroundColor: '#1c1c1c',
        backgroundSize: '100%, cover',
        backgroundPosition: 'center, center',
        width: '100%',
        position: 'relative'
        }}>
        
        /* ... 생략 */
)

0개의 댓글