230203_TIL

오늘 공부한 내용

• 항해 99 실전프로젝트

• 오류 및 개선사항 코드 수정 중

궁금한 내용 / 부족한 내용

모달을 클릭 했을 때 뒤에 생기는 스크롤을 삭제하고 싶었다.  기존에 사용 했던 코드는 

const useModal = () => {
  const [modal, setModal] = useState(false);
  const handler = () => {
    setModal(!modal);
    modal
     ? (document.body.style.overflowY = 'visible')
      : (document.body.style.overflowY = 'hidden');
  };
  return [modal, handler];
};

이러했다. 

하지만 모달 팝업에 관련된 내용을 찾아보던 중 cssText을 권유하라는 글을 보고 수정을 하게 되었다. 그 포스트에 관련된 내용을 빌려 말하자면 cssText를 쓰는 이유는 style을 여러번 접근하면 그 횟수만큼 reflow가 발생하게 된다. cssText를 이용하면 1번만 계산하기 때문에 이렇게 js로 css를 건드릴 경우 퍼포먼스를 위해 필수로 해주는 것이 좋다고 한다.

 

modal
      ? (document.body.style.overflowY = 'visible')
      : (document.body.style.overflowY = 'hidden');

 

하지만 이유를 모르겠지만 한번씩 가끔 스크롤이 없어진 상태로 페이지가 렌더링 되는 상황이 발생하고 있다. 아마 이 'hidden' 속성때문이라고 파악하고 확인을 했다. 어떻게 렌더링을 하는 과정에서 모달을 열지도 않았는데 스크롤 hidden이 발생이 되는지 아직 감이 잡히지 않아 난감한 상황이다.

 

느낀점

프로젝트 발표에 관한 발제를 듣는 날이라서 그런지 뭔가 기분이 싱숭생숭하기도 하고 다시 조급해지는 날이였다. 끝이 코 앞으로 다가와 반가운 날이기는 하지만 그 반대로 새로운 환경으로 다시 적응해야 하는 의미이기도 하기에 호기심 반 두려움 반으로 생각이 드는 날었다. 

열심히 준비하는 팀원들을 위해서라도 끝까지 최선을 다하길!