1차 프로젝트 Day 9🔥

(스크롤 이벤트)

Daily standing meeting log (1 차 프로젝트 Day 9)🤏🏼

9는 중국식 표기법과 딱맞는 이모지가 없었다 ㅜㅜ 슬픔...

Back-end

Done

• CSV 넣기
• product merge DB테스트 완료
  -데이터 베이스 CSV 밀어 넣기 (ING)
  -비밀번호 validation
  -인가 데코레이터
  -뷰 논의

Today's To-do's

• 위시리스트 view 작성 중
• CSV 작업

blocker

• x

Front-end

아래 굵은 글씨 부분이 내가 구현 한 /구현 할 부분

Done

• Newsletter, search 페이지 만들기
• 메인 페이지 슬라이더 이벤트
• 메인 페이지 사진 간 틈 해결하기
• 제품 상세 페이지 레이아웃 구현 완료
• data 형식 백엔드 공유
• 장바구니 페이지 레이아웃 완료
• log-in/password 인가 backend와 맞추기
• log-in/password detail 구현
• 장바구니 페이지 /팝업 형 장바구니 페이지
• img 모달 만들기

Today's To-do's

• log-in/password detail 구현
• 위시리스트 페이지 만들기
• 팝업 형 장바구니 페이지 기능 구현
• 네브바 scroll event 구현
• 상품 페이지 scroll event 구현
• 로딩 페이지 화면 구현

blocker x

• x

---

🈶🈚 스크롤 이벤트 적용

고려 사항

• 제품 상세 페이지에서 스크롤을 내리면 일정 구간에서 부터 하단에 검정 네브바가 등장 하는데, 가격, 사이즈, 장바구니 담기에 해당하는 요소를 포함하고 있었다. 이를 구현하기 위해 스크롤 이벤트를 적용하였다.

• 먼저 보여주거나 말거나의 요소가 될 것이므로 boolean 값으로 관리할 state를 지정해 주어야 하고 window의 scroll event를 감지할 window.addEventListener(,) 콜백 함수를 react lifecycle에서 render 되어야 하는 부분에 위치 시키고, addEventListner를 사용했으니 removeEventListner도 lifeCycle에 맞게 위치 시켜야 할 것이다.

코드 정리

• 먼저 true일때 render 하는 함수 적용을 위해 isVisible state 값을 false로 지정한다.

this.state = {
isVisible:false
}

• 스크롤의 위치에 따라 실행 할 함수인 handleScroll을 만들고 처음render 되고 변화된 state 값에 실행 할 수 있게 매개 변수를 두개 받는 window.addEventListener(,)함수를 ComponentDidMount함수에 위치 시켜 준다.

ComponentDidMount() {
   window.addEventListener("scroll", this.handleScroll);
}

• React lifecylcle에서 addEventListner를 지정해 주었다면 항상 removeEventListner를 해주어야 불필요한 메모리 손실을 막고 계속해서 이벤트가 서버에서 돌아가고 있는 상황을 방지할 수 있다. 위치는 ComponentWillUnmoust()에 위치시킨다.

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

왜 react에서의 eventlistner를 remove 해줘야하는지 잘 설명한 포스팅

• handleScroll 함수에 scroll 이벤트가 일어나면 내가 원하는 y축 값을 넘길때는 isVisible을 true로 아닌경우는 false로 적용되게끔 삼항 연산자를 적용시킨다.

  handleScroll = () => {
    this.setState({
      isVisible: window.pageYOffset > 500 ? true : false,
    });
  };

• 하단 바를 위치하고 싶은 코드에 ProductBottomBar 컴포넌트를 만들어 주고 props로서 보여줄지정할 isVisible, 상품 가격, 사이즈를 넘겨준다.
• 이때 첫 render 값에서 detailData 가 빈 객체로 되어있는데 이때 render된 값을 props로 넘겨주면 undefiend가 되므로 해당 값이 있을때 만 아래를 실행 시킨다는 &&를 적용해주면 값이 안들어올 불상사를 막을 수 있다.

            {detailData.product_size && (
              <ProductBottomBar
                isActive={isVisible}
                price={detailData.product_price.toLocaleString()}
                size={detailData.product_size}
              />
               )}

• ProductBottomBar component에서는 첫 div 값에서 hide className을 통해 opacity 값을 0으로 적용해 준 뒤, isVisible 값에 따라 opacity 값을 적용해주는 삼항 연산자 로직 구현을 통해 화면에 렌더 될 지 안 될지를 결정 해주면 된다!

  <div className={`ProductBottomBar ${isActive ? "" : "hide"}`}>