이 글에서는 화면 흔들림을 방지하고, 자연스러운 스크롤 경험을 제공하기 위한 방법을 설명합니다. 웹 페이지를 만들다 보면 종종 컴포넌트 내에 스크롤이 필요한 경우가 있습니다. 컴포넌트 안에서 스크롤을 최대로 내리면 부모 컴포넌트의 스크롤이 함께 움직이는 문제가 발생할 수 있습니다. 이를 방지하기 위해 HTML 및 Body 태그에 `overflow: hidden` 속성을 적용할 수 있지만, 이로 인해 스크롤바가 사라지면서 화면 크기가 변동되어 사용자에게 불편함을 줄 수 있습니다. 이 글에서는 이러한 문제를 해결하기 위한 방법을 소개합니다.  아래 코드는 리액트(React)에서 이 문제를 해결하기 위한 예제입니다. useEffect 훅을 사용하여 조건에 따라 바디의 패딩을 조정하여 화면 흔들림을 방지합니다...