Locales:
ko
en
tl;dr
사용자가 뒤로가기 버튼을 눌렀을 때 페이지가 원래 스크롤 됐던 위치로 돌아갈지 여부를 설정할 수 있어요.
1const scrollRestoration = history.scrollRestoration; 2if (scrollRestoration === "manual") { 3 console.log( 4 "옵션을 manual로 설정하면 스크롤 위치가 복원되지 않고 사용자가 직접 수동으로 옮겨야 해요." 5 ); 6}
스크롤 복원
Scroll Restoration, 즉 스크롤 복원에 대한 브라우저 History API에 관한 내용이에요. 이 API는 사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때, 페이지가 원래 스크롤되었던 위치로 돌아갈지 여부를 설정할 수 있어요.
기본값은 auto고, 이 값을 manual로 설정하면 스크롤 한 위치를 복원하지 않아요.
1// 사용자가 스크롤한 페이지의 위치가 복원돼요. 2history.scrollRestoration = "auto"; // default 3 4// 페이지의 위치는 복원되지 않아요. 사용자는 해당 위치로 수동으로 스크롤해야 해요. 5history.scrollRestoration = "manual";
참고
관련 포스트가 4개 있어요.
useSyncExternalStore가 무엇일까?
짧.
![react-use-sync-external-store cover image](/static/d8254a4c3e40322a3014ad32e1506131/ae1c8/cover.png)
2023/10/23 (updated)
React 18 useSyncExternalStore에 대해서
CSS flex box의 align-items의 flex-start와 baseline의 차이점에 대해서
짧.
![css-flex-box-align-items-attributes cover image](/static/20feda8f0383648fdcd138db391385a7/ae1c8/cover.png)
2023/09/24
CSS에서 align-items의 flex-start와 baseline의 차이점
React 18.0.0 react-dom의 flushSync의 사용법과 주의사항에 대해서 알아보자.
짧.
![react-flush-sync cover image](/static/e04f8bbb7a6b7d8cd4337e8130be1e8c/ae1c8/cover.png)
2023/09/24
React flushSync에 대해서
maxLength를 넣고 이모지를 넣으면 브라우저마다 계산되는 것이 다르다.
짧.
![html-input-max-length cover image](/static/24611ed38f557848fc2f7050ae805056/ae1c8/cover.png)
2023/09/15