resize 질문

애플 웹사이트 인터랙션 클론!

스크롤 높이 세팅

작성

220

안녕하세요. resize 할때, 프론트엔드의 프레임워크를 사용할 경우, 직접적으로 DOM을 접근하는 것은 일종의 안티패턴이잖아요. 그러면 resize 이후 변경된 값을 컴포넌트에 props로 넘기게 될텐데, 이 과정에서 잦은 리렌더링이 발생하잖아요.

그런경우에는 어떻게 하는것이 퍼포먼스 측면에서 좋을까요?

계속 리사이즈 하는것이 아니니 크게 상관없는 것인지. 아니면 다른 방식으로 처리할 수 있는 것인지 잘 모르겠네요.

svg 인터랙티브 웹 javascript HTML/CSS 웹 디자인 클론코딩

답변 2

Youngmin Wi

이 강의를 듣는 시점이 많아 달라서, 현재 질문자님에게 도움이 될지는 모르겠으나

제가 알기로는 resize 같은 이벤트발생시마다 작동하는 것을 최소화 하기위해서 debounce 나 throttle 기법을 사용하는 것으로 알고 있습니다.

두 가지모두 선생님이 언급하신 setTimeout 같은 timing 을 제어해서 callback 함수를 제어하는 방식이긴 하지만요 :)

1분코딩

지식공유자

말씀대로 리사이즈가 빈번하게 일어나는 것은 아니라서 따로 신경쓰지 않아도 되는 경우도 많기는 한데요,
스크롤이나 리사이즈처럼 많은 횟수가 실행될 가능성이 있는 경우 아래처럼 setTimeout과 상태변수를 이용해서 실행횟수를 제한하기도 합니다. (예제에서는 333밀리초에 1번씩, 즉 1초에 3회 실행되게 했습니다)

let state = true;
  let n = 0;

  window.addEventListener('resize', () => {
    if (!state) return;

    state = false;

    setTimeout(() => {
      console.log(n++);
      state = true;
    }, 333);
  });

가끔 사용되는 패턴이니, 환경에 맞추어 변형해서 사용하시면 됩니다^^

인프런 커뮤니티 질문&답변

resize 질문