구현한 것

  • 리스트를 스크롤 하면 해당 리스트들이 휠 처럼 돌아감
  • 스크롤 하는 범위 제한
  • throttle 함수를 사용해서 스크롤 이벤트를 적당히 제한
  • 해당 리스트들 화면 중앙에 위치

배운 것

1. throttle, debounce 함수
2. props, state 의 의미

  • props : 부모 Component에서 전달 받는 값, 자식 Component(나)의 입장에서는 어떻게 바꿀 수 없음(immutable), props가 변해도 화면이 다시 render되지는 않음
  • state : 내 컴포넌트 안에서 바꿀 수 있는 값들,
    • ex) ajax로 요청한 데이터를 가져와서 state를 변경시킴, event 발생에 따라 state의 값이 바뀜
    • state를 변경하고 싶으면 setState를 쓰고 state를 변경하면 화면이 새로 render됨
  • 부모의 state가 변할 때 자식의 state에 영향을 주고 싶을 때 :
    부모의 state를 props로 전달 후 자식 component의 static getDerivedStateFromProps(props, state){} 함수에서 props가 바뀔 때마다 setState

3. position : absolute, relative

어제의 반성을 통해서 어떤 걸 구현하는 게 목표인지 정하고 그것들을 잘게 여러 task들로 나누는 식으로 해결해나가니 부담이 덜했다. 못할 거 같았는데 하나씩 하나씩 해결해 나가니 뿌듯했음

어제 구현 한 것! 아직 막 툭툭 튕기긴 함..
wheel.gif