Keep Scroll Position

파이널미션때 메인페이지에서 다른 페이지로 갔다가 뒤로돌아왔을때 스크롤한 위치를 기억해 돌아가는 기능을 구현했다.

스크롤 상태유지는 충분히 다른 컴포넌트에서도 사용할 수 있기때문에 hooks로 만들었다.

sessionStorage에 y축 값을 저장해 스크롤을 유지하도록 했는데 왜 sessionStorage를 사용했을까?

[ cookie VS localStorage VS sessionStorage ]

cookie

• 쿠키는 만료기한이 있는 key-value 저장소이다.
• 쿠키는 4kb의 용량 제한이 있다.
• 또한 매 서버 요청마다 서버로 쿠키가 같이 전송된다.
• 브라우저에서 서버로 GET요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구로부터 오는지 파악하지 못한다. 그래서 요청을 보낼때 쿠키에 나에 대한 정보를 담아서 보내면 서버는 쿠키를 읽어서 내가 누군지 파악할 수 있다. 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송되는 것이다.

Web Storage

서버가 아닌, 클라이언트에 데이터를 key-value로 저장할 수 있도록 지원하는 HTML5의 새로운 기능이며, 약 5MB까지의 용량으로 거의 제한이 없다고 볼 수 있다.

1. localStorage

• 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
• 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하기에 좋다.

2. sessionStorage

• 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
• 윈도우 복제로 생성된 경우, 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 잠깐 동안 필요한 정보(일회성 로그인 정보 등)는 세션 스토리지에 저장하기에 좋다.

→ 이러한 차이점들이 있다. 일회성으로 해당 브라우저가 켜져있을때만 스크롤이 유지가 되어야 자연스럽다. 브라우저를 껏다가 켰을때도 유지가 되어있으면 안되기에 seesionStorage를 사용했다.

스크롤 유지 hooks

common/hooks/useScroll.tsx

import { useEffect } from 'react';

function useScroll(sessionStorageKey: string, isScroll: boolean): void {
  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      sessionStorage.setItem(sessionStorageKey, String(currentScrollY));
    };

    const scrollPosition = Number(sessionStorage.getItem(sessionStorageKey));
    if (isScroll) {
      window.addEventListener('scroll', handleScroll);
      window.scrollTo(0, scrollPosition);
    }
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
}

export default useScroll;

→ 사용시 useScroll('home_scroll_pos', true) 첫번째 props로는 원하는 sessionStroge key값을 넣어주고 두번째 props론 스크롤유지기능 사용여부를 boolen으로 넣어준다.메인페이지에서 다른 페이지로 갔다가 뒤로돌아왔을때 스크롤한 위치를 기억해 돌아가는 기능을 구현했다.

스크롤 상태유지는 충분히 다른 컴포넌트에서도 사용할 수 있기때문에 hooks로 만들었다.

sessionStorage에 y축 값을 저장해 스크롤을 유지하도록 했는데 왜 sessionStorage를 사용했을까?

[ cookie VS localStorage VS sessionStorage ]

cookie

• 쿠키는 만료기한이 있는 key-value 저장소이다.
• 쿠키는 4kb의 용량 제한이 있다.
• 또한 매 서버 요청마다 서버로 쿠키가 같이 전송된다.
• 브라우저에서 서버로 GET요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구로부터 오는지 파악하지 못한다. 그래서 요청을 보낼때 쿠키에 나에 대한 정보를 담아서 보내면 서버는 쿠키를 읽어서 내가 누군지 파악할 수 있다. 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송되는 것이다.

Web Storage

서버가 아닌, 클라이언트에 데이터를 key-value로 저장할 수 있도록 지원하는 HTML5의 새로운 기능이며, 약 5MB까지의 용량으로 거의 제한이 없다고 볼 수 있다.

1. localStorage

• 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
• 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하기에 좋다.

2. sessionStorage

• 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
• 윈도우 복제로 생성된 경우, 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 잠깐 동안 필요한 정보(일회성 로그인 정보 등)는 세션 스토리지에 저장하기에 좋다.

→ 이러한 차이점들이 있다. 일회성으로 해당 브라우저가 켜져있을때만 스크롤이 유지가 되어야 자연스럽다. 브라우저를 껏다가 켰을때도 유지가 되어있으면 안되기에 seesionStorage를 사용했다.

스크롤 유지 hooks

common/hooks/useScroll.tsx

import { useEffect } from 'react';

function useScroll(sessionStorageKey: string, isScroll: boolean): void {
  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      sessionStorage.setItem(sessionStorageKey, String(currentScrollY));
    };

    const scrollPosition = Number(sessionStorage.getItem(sessionStorageKey));
    if (isScroll) {
      window.addEventListener('scroll', handleScroll);
      window.scrollTo(0, scrollPosition);
    }
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
}

export default useScroll;

→ 사용시 useScroll('home_scroll_pos', true) 첫번째 props로는 원하는 sessionStroge key값을 넣어주고 두번째 props론 스크롤유지기능 사용여부를 boolen으로 넣어준다.