🐾 react-parallax 대신 background-attachment 사용

AS-IS (기존 코드):

import React, {useContext} from "react";
import { UserContext } from "@/pages/_app";
import styles from "./index.module.css";
import { Parallax } from "react-parallax";
import Link from "next/link";

const Wrapper = () => {
  const languageList = useContext(UserContext)
  return (
    <div className={styles.wrapper}>
      <Parallax
        strength={500}
        bgImage="/main/main1.jpeg"
        bgImageAlt="Trinity salon & spa"
        className={styles.background}
      >
        <div className={styles.content}>
          <div className={styles.text}>
            <h2>TRINITY SALON SPA</h2>
            <div className={styles.btns}>
              <Link className={styles.firstBtn} href="/booking">
                {languageList.state.language === 'English'
                  ? 'Book Now'
                  : '지금 예약하기'}
              </Link>
              <Link className={styles.secondBtn} href="/price">
                {languageList.state.language === 'English'
                  ? 'Services'
                  : '서비스'}
              </Link>
            </div>
          </div>
        </div>
      </Parallax>
    </div>
  )
}
export default Wrapper

https://www.youtube.com/watch?v=BmJrtaCBsss

전 코드에서 React Parallax를 사용하였다.
-> 이 방식은 JavaScript를 사용하여 이미지를 스크롤에 따라 이동시키는 것이었습니다. 이것은 이미지를 동적으로 조작하는 방식으로, 스크롤 이벤트에 따라 이미지의 위치를 변경하여 Parallax 효과를 구현했습니다.

🔎 React Parallax 를 사용해서 생기는문제

📌성능 문제: 
JavaScript를 사용하여 스크롤 이벤트에 따라 요소를 동적으로 조작하는 것은
성능에 부담을 줄 수 있습니다.
특히, 스크롤 이벤트가 발생할 때마다 DOM을 업데이트하고 다시 렌더링하는 과정에서 
성능 저하가 발생할 수 있습니다.

📌프레임 문제: 스크롤 이벤트에 따라 이미지를 동적으로 이동시키는 경우,
사용자가 스크롤할 때 이미지가 끊기거나 떨리는 등 부자연스러운 움직임을 보일 수 있습니다. 
이는 사용자 경험을 저하시킬 수 있습니다.

---

TO-BE (개선된 코드):

import React, { useContext } from 'react'
import { UserContext } from '@/pages/_app'
import styles from './index.module.css'
import Link from 'next/link'
import MainImage from 'public/main/main1.jpeg'

const Wrapper = () => {
  const languageList = useContext(UserContext)
  return (
    <div
      className={styles.wrapper}
      style={{
        backgroundImage: `url(${MainImage.src})`,
        backgroundAttachment: 'fixed',
        backgroundPosition: 'top center',
        backgroundRepeat: 'no-repeat',
      }}
    >
      <div className={styles.content} style={{ zIndex: '1' }}>
        <div className={styles.text}>
          <h2>TRINITY SALON SPA</h2>
          <div className={styles.btns}>
            <Link className={styles.firstBtn} href="/booking">
              {languageList.state.language === 'English'
                ? 'Book Now'
                : '지금 예약하기'}
            </Link>
            <Link className={styles.secondBtn} href="/price">
              {languageList.state.language === 'English'
                ? 'Services'
                : '서비스'}
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Wrapper

이와 달리 변경된 코드에서는 CSS의 background-attachment 속성을 사용하여 Parallax 효과를 구현했습니다.
이는 JavaScript를 사용하지 않고 CSS만을 이용하여 배경 이미지를 고정시키는 방법입니다.

🔎 CSS의 background-attachment 속성 으로 Parallax 를 사용해서 좋은점

📌성능 향상: 
JavaScript를 사용하여 요소를 동적으로 조작하는 것보다 CSS를 사용하는 것이 일반적으로 더 효율적입니다. 스크롤 이벤트에 따른 동적 처리가 필요 없으므로 성능 부담이 줄어듭니다.

📌부드러운 UX: 
CSS를 사용한 Parallax는 브라우저의 GPU 가속을 이용하여 부드럽게 처리됩니다. 이로 인해 스크롤할 때 레이어가 부드럽게 움직이는 자연스러운 경험을 제공합니다.

📌간편성: 
JavaScript를 사용하지 않고 CSS만을 사용하여 Parallax를 구현하면 코드가 더 간결해지고 유지보수가 쉬워집니다.

📌깜박임 및 레이아웃 문제 해결: 
JavaScript를 사용하는 방식에서 발생할 수 있는 깜박임 문제나 레이아웃 이동 문제를 CSS를 사용함으로써 해결할 수 있습니다.

한마디로! 굳이, React Parallax 를 사용하면서 성능저하를 시킬필요가없다. 코드 변경 후, 스크롤 이벤트에 따른 이미지의 움직임 대신에 CSS를 사용하여 이미지를 고정시키므로써 성능이 향상되었고, 사용자에게 부드러운 Parallax 효과를 제공하게 되었습니다. 또한, 코드가 더 간결해지고 유지보수가 용이해졌습니다.

추가로,

🐾 fixed와 scroll의 차이점은 엘리먼트가 고정되는 대상이 다르다는 점입니다.

Fixed (고정):
고정된 엘리먼트는 뷰포트에 상대적으로 고정됩니다.
즉, 사용자가 페이지를 스크롤하더라도 해당 엘리먼트는 항상 뷰포트의 고정된 위치에 남아 있습니다.

Scroll (스크롤):
스크롤되는 엘리먼트는 그 자체가 스크롤됩니다.
즉, 사용자가 페이지를 스크롤할 때 해당 엘리먼트도 함께 움직입니다.
보통 페이지의 일부분이나 모달 창 같은 팝업 요소를 스크롤하는 데 사용됩니다.
따라서 fixed 속성을 사용하면 엘리먼트가 항상 일정한 위치에 고정되어 있어서 페이지를 스크롤할 때 화면에서 사라지지 않고 계속해서 보여집니다. 반면에 scroll 속성은 엘리먼트가 스크롤되는 요소 안에 위치하여 스크롤에 따라 움직이게 됩니다.

📝 추가로 📝

콜스택, 이벤트루프
리플로우, 리페인트
스크롤이벤트, 쓰로틀

📌쓰로틀링?

쓰로틀링은 요청을 한 번에 하나만 들어주고 아직 현재 실행하고 있는 턴이 종료되지 않은 상태라면 어떤 요청도 받아들이지 않는다.

쓰로트링을 수행한 경우 “canada” 의 첫 글자인 “c” 를 검색하도록 서버에 요청을 하는데 최초 요청 이후 일정 시간동안은 어떠한 응답도 받지 않는다. 정해진 시간이 모두 지나고 나서야 그 다음 요청인 “canada” 의 두 번째 “a” 가 입력된 “cana” 를 서버에 요청하게 되는 것이다.
https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-e02f6bb14627

콜스택 (Call Stack):
콜스택은 함수 호출을 추적하는 자료 구조입니다.
함수가 호출될 때마다 해당 함수의 정보를 스택에 저장하고, 함수가 반환될 때 해당 정보를 스택에서 제거합니다.
이를 통해 현재 실행 중인 함수와 해당 함수가 호출한 다른 함수들의 관계를 추적하고 관리합니다.

이벤트 루프 (Event Loop):
자바스크립트에서 비동기 작업을 처리하는 메커니즘 중 하나입니다.
이벤트 루프는 콜스택, 백그라운드, 태스크 큐를 사용하여 비동기 작업을 관리합니다.
콜스택이 비어있을 때 백그라운드에서 오는 이벤트나 비동기 작업을 태스크 큐로 이동시키고, 콜스택이 비어있으면 태스크 큐에서 작업을 꺼내와 콜스택에 넣어 실행합니다.

리플로우와 리페인트:
브라우저가 HTML과 CSS를 렌더링하여 화면에 표시하는 과정 중의 두 가지 단계입니다.

리플로우(Reflow): 요소의 레이아웃이 변경될 때 발생하는 과정으로, 레이아웃을 재계산하고 다시 그리는 과정입니다.

리페인트(Repaint): 요소의 스타일이 변경될 때 발생하는 과정으로, 변경된 스타일만 다시 그리는 과정입니다.

스크롤 이벤트와 쓰로틀:
스크롤 이벤트는 사용자가 웹 페이지를 스크롤할 때 발생하는 이벤트입니다.

쓰로틀(Throttle): 이벤트 핸들러의 실행을 지연시키는 기술로, 일정 시간 동안 동일한 이벤트가 여러 번 발생하더라도 일정한 주기로만 이벤트 핸들러가 실행되도록 제어합니다.
쓰로틀을 사용하면 스크롤 이벤트와 같이 과도하게 발생하는 이벤트의 처리를 최적화할 수 있습니다.