78 :: 2차 팀 프로젝트, useState 그리고 useRef

엘리스 SW 엔지니어 트랙 78일차

팀 프로젝트 13일차

 

 

대망의 서버 연결

더미로 작성된 것을 치우고 서버와 연결의 날

생각대로 여러 문제 발생했다

 

 

 

모달 뒷배경 스크롤 금지

모달 뒷배경 CSS로 하는 방법을 생각하다 구글에게 물어봤다

useEffect를 적절히 사용하면 이렇게 할 수 있구나~

그리고

이런 페이크가!!!

모달 주위서부터 어떻게 하려고만 했지

body 스타일을 올려서 보여주는 생각은 못했다

보여주는 방식에 대해 한층 더 다각도로 봐야겠다

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);
  };
}, []);

 

 

useState 그리고 useRef

리액트의 보여주기 방식

그리고 useSate, useRef에 대해 이해되고 있다고 생각한 요즘

한 대 맞았다

 

필요할 때만 렌더링 되게 하고

최대한 렌더링을 줄이려고

useState, useRef 등 자유자재로 훅을 사용해서

 

필터, 검색, 페이지네이션을 뚝딱 뚝딱

개별로 작동 잘된다~~~~

신나서 세가지 기능을 삼위일체 하는 순간

원하는 대로 굴러가지 않았다..

 

결국 리액트의 보여주기 방식,

리액트 라이프사이클, 훅들의 방식

을 깊게 생각하는 고통의 시간을 가지며

 

결국 작동을 시켰는데 아직 탐탁치 않는다

리액트의 움직임이 내 머리속에 확 펼쳐지도록 해야겠다

 

 

참고 링크

모달 스크롤 금지

=> http://yoonbumtae.com/?p=3776 

 

useRef()

=> https://dmitripavlutin.com/react-useref-guide/