프로젝트 41/100 - JSX에서 반응형 CSS 작성

여기요! 저는 3월 8일에 끝나는 100개의 React.js 프로젝트를 만드는 임무를 맡고 있습니다. 업데이트를 위해 내 dev.to 프로필 또는 my를 팔로우하고 질문이 있는 경우 언제든지 연락하십시오. 지원해 주셔서 감사합니다!

오늘 배포된 앱 링크: Link
리포지토리 링크: github

이것은 클라이언트 웹사이트의 첫 번째 초안을 따르는 짧은 프로젝트였습니다. 웹사이트는 모바일에 최적화되어 있지만 데스크톱 뷰어가 이해할 수 있도록 몇 가지 스타일을 추가하고 싶었습니다. 주요 과제는 "곧 추가 예정"이라는 정적 배경 이미지 요소(스페인어에서 의역)였습니다.

모바일 화면의 경우 background-size: cover CSS 속성을 활용하여 단순히 공간을 덮고 싶었습니다. 꽤 큰 화면에서는 이미지의 작은 부분만 표시되기 때문에 이것이 우스꽝스럽게 보일 수 있습니다.

순수 CSS에서 이것은 미디어 쿼리로 쉽게 해결됩니다. 최적화하려는 화면 크기(예: 너비 570px 이상)를 지정하고 괄호 안에 스타일을 설정하기만 하면 됩니다.

이 프로젝트에서는 실제로 props를 사용하여 구성 요소를 재사용할 수 있도록 구성 요소에 이미지 URL을 전달합니다. JSX 내에서 CSSbackground 속성을 설정하고 있으므로 실제 스타일시트의 다른 스타일 중 일부를 무시합니다.

CSS는 이미지 URL이 이 객체에 전달되기 훨씬 전에 html 페이지에 로드되므로 이미지에 background-size: cover 스타일을 부여할 수 있는 데 방해가 됩니다.

대신 Javascript를 사용하여 window 개체의 다음 기본 제공 바닐라 Javascript 속성을 사용하여 화면 크기를 확인할 수 있습니다.

window.innerWidth

이 속성은 창의 내부 너비를 반환하므로 다양한 화면 크기에 대한 스타일을 설정할 수 있습니다.

문제? 이 속성은 페이지 로드 시 한 번만 호출됩니다. 솔직히 모바일에서는 괜찮지만 누군가가 브라우저에서 창을 보고 창 크기를 조정하고 옆으로 밀어버리면 다시 호출되지 않습니다. 창 크기가 조정될 때 속성을 다시 호출하려면 window.onresize 메서드에서 콜백을 활용합니다. ReactuseState를 사용하여 페이지 로드 시와 화면 크기를 조정할 때마다 windowWidth 변수를 화면 크기로 설정하고 있습니다.

  const [windowWidth,setWindowWidth] = useState(0);

  window.onresize = () => {
    setWindowWidth(window.innerWidth);
  }

이제 화면 크기가 변경될 때마다 업데이트되는 변수가 있으므로 여기와 같이 삼항을 사용하는 것처럼 각 화면 크기에 대해 JSX 요소에 전달할 별도의 스타일 객체를 만들 수 있습니다.

  const innerImageStyle = windowWidth < 570 ?
   ({
    width: '100%',
    height: '80vh',
    backgroundImage: `url(${props.imageUrl})`,
    backgroundSize: 'cover',
  }) : 
   ({
    width: '100%',
    height: '500px',
    backgroundImage: `url(${props.imageUrl})`,
    backgroundSize: 'contain',
  });

모바일 장치(너비 570픽셀 미만)인 경우 볼 수 있듯이 사용 가능한 공간을 배경으로 덮어야 합니다. 데스크탑 컴퓨터인 경우 배경이 반복되기를 원합니다(여기서 클라이언트의 선택이지만 저는 마음에 듭니다).

React useEffect 후크를 사용하여 이 작업을 수행할 수도 있다고 확신하지만 이것은 간단한 버전을 위한 것이며 솔직히 내장 자바스크립트 창 메서드가 얼마나 강력한지 과소평가되고 제대로 가르쳐지지 않은 것 같습니다.

의견에서 React 구성 요소에 대한 조건부 스타일 지정 방법과 생각을 알려주십시오...