내일 배움 캠프 4기 TIL(23.01.26)

Check List

• 마이페이지 내가쓴글 좋아요한글 버튼 클릭 되어있게 만들기
• menu모달창 슬라이드 구현
• menu모달창 마운트시 화면 어두워짐
• menu모달창 모달창 pr

Problem

• menu모달창 마운트시 화면 어두워짐 & 화면 고정

Try

useEffect(() => {
  document.body.style.cssText = `
    position: fixed; 
    top: -${window.scrollY}px;
    overflow-y: scroll;
    width: 100%;`;
  return () => {
    const scrollY = document.body.style.top;
    document.body.style.cssText = '';
    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
  };
}, []);

메뉴가 화면 전체를 못채워줌 화면 고정을 할려고함 하지만 toggle시 화면이 고정이 않되었다.

Solution

  useEffect(() => {
    if (modalHandler) {
      document.body.style.cssText = `
    position: fixed;
    top: -${window.scrollY}px;
    overflow-y: scroll;
    width: 100%;
    height:100vh;`;
    } else {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
    }
  }, [modalHandler]);

useEffect 사용에 미숙함이 있었다 마운트와 언마운트이해도가 없었던거 같다.

Learn

useEffect 디펜던시 arry 공부 다시하기....