영화 디테일 페이지에 들어가니 크롬 콘솔창에 이런 에러가 발생했다.
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'
}}>
/* ... 생략 */
)