Today, I Learned

• React.memo : 이전 props와 동일한 props로 리렌더링 되는 상황이 많은 컴포넌트를 React.memo로 리팩토링해서 얕은 비교, 즉, React.memo에 이전 렌더링을 저장해놓고, 다음 렌더링시에 이전 props와 props가 동일하면 이전에 저장해둔 것을 재사용하는 방식으로 더욱 빠른 re-render를 구현할 수 있다.(원래 리액트는 이전의 렌더링과 다음 렌더링을 비교한 다음에 리렌더링을 결정하는데, 이 때, 부모 컴퍼넌트의 props가 변경되어서, 자식 컴포넌트의 props는 그대로인데도 강제로 함께 rerendering되는 경우가 있다. 이런 경우에 props가 같으면 이전에 렌더링을 기억해뒀다가 재사용하는 React.memo를 쓰는 것이 효율적인 것! why? 굳이 리렌더링 하지 않아도 될 것을 하고 있으므로, 그것을 안하게 만들어주므로)
• 드디어! 진짜로 infinite scroll 완성!!!!!!!!!!!!!!!!ㅂㄷㄹㅈㄷㄹㅈ@!2ㄷ32ㄷ!!(참고 블로그 : link)

  문제가 됐던 부분은 로딩을 하자마자 intersecting이 true로 잡혀서 addPosts 요청을 보내게 된다는 점과 
  target element가 posts의 수가 3개인 것처럼 적은 수일 때(target element가 빈 div가 아니라 스피너처럼 생겨서 넓이를 차지하는 경우임) grid화면에 보이는 문제가 있었는 데, 
  postsCount>=15인 경우에만 display:inline을 해서 해결했다. 
  첫번째 문제점은 처음 intersecting이 true일 때는 renderCount라는 state를 둬서 그것이 0인 경우엔 서버로 요청을 보내지 않도록 했다.

Planning to Study

• 내일은 imgSlide를 구현할 계획이다.
• + web, mobile UI 최종 점검
• 스피너 만들어서 로딩부분 마다 적용해주기
• 다음주에는 state 완성해서 서버와 커넥션 부분만 진행할 수 있도록 만들어놓자.