배운내용

게시물을 수정하여 다시 메인페이지로왔을떄 업데이트 시키는 내용을 구현했다. 파이어베이스에 기존에 등록되어있는 게시물을 업데이트를해주는 과정에서 게시물을 작성한 유저의 정보가 게시물을 매번 수정할떄마다 유저의 정보가 중복되어 들어가는 것을 발견했다. 파이어베이스에서 제공하는 업데이트함수를 사용하는데있어서 게시물의 고유 아이디값과 게시물 내용을 인자로 전달해주었는데, 이값들을 업데이트하는데 스프레드표기법으로 업데이트함수에 값을 넣어주게되면 기존에 파이어베이스에 등록된 내용과 비교하여 변화가 발생한 부분에서 선택적으로 업데이트를 해준다. 근데 이떄 인자로 전달받은 아이디값을 활용하여 파이어베이스에 있는 해당 게시물을 받아오게되면, 파이어베이스에 존재하는 값의 형태와, 게시물 컴포넌트에서 받아온 값의 구조가 달라, 컴포넌트에서 받아온 정보로 파이어베이스의 값을 업데이트해주게되면, 기존에 파이어베이스의 값들이 업데이트가되면서 원하지않는 유저의 정보가 추가가되는것이였다.

무한스크롤

구현하는데 배웠던 여러 개념들은 앞으로다른 기능을 구현할떄 자주 사용할것같아 이부분은 쫌 여러번 반복해서 볼 필요가있는것같다. 이벤트를 효울적으로 처리해주는 Lodash라는 라이브러리라는 개념을 새로배웠고 그중에서 debounce,throttle 배웠고 throttle를 활용하여 무한스크롤 기능을 구현했다. throttle가 작동하는 방식은 이벤트가 발생할 시간을 정해두고, 그시간안에서 발생하는 이벤트중 가장 마지막에 발생했던 이벤트를 지정했던 시간이되면 실행시키고 그전에 발생했던 이벤트는 무효화시키는 방식을의미한다. debounce를 이용하여 구현하지않은이유는 사용자가 게시물을 자연스럽게 보게하기위해선, 이벤트가 끝났을때 다음목록을 불러오는것보단, 어느정도 불러올떄가 됬을떄를 판단하여 불러오는것이 사용자의 입장에서 게시물을 보는데 편하기때문이다.

useCallback

이는 함수형 컴포넌트의 한계를 극복하기위해 사용하였다. usecallback을 사용하게되면 등록시킨 함수는 usecallback의 두번쨰 인자로 전달된 값이 변하지않는이상 등록된 함수는 업데이트가 되지않는다. useEffect와 유사하게 동작하는데, 이를 함수형 컴포넌트 안에서 사용하게되면, 리렌더링이 발생할시 이 함수또한 다시 정의가되기떄문에 일정한 시간이후에 이벤트를 동작을 처리하는과정이 비정상적으로 동작한다. 따라서 화면의 렌더링이 발생해도 업데이트를 시켜주지않기위해 usecallback으로 제어해준다.