TIL#8 React에서 Scroll event 사용하기

웹페이지에서 공통으로 사용되는 Nav 컴포넌트를 만들어서 모든 페이지에 적용하기로 했다.

모든 페이지에서 공통 컴포넌트 넣기

모든 페이지에서 공통으로 사용하기 위해서 매번 페이지마다 <Nav />를 입력할 필요없이 Routes.js 파일에서 하기와 같이 적용시 모든 페이지에서 적용이 된다.

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Nav />
        <Switch>
          <Route exact path="/" component={Main} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={SignUp} />
          <Route exact path="/productlist" component={ProductList} />
          <Route exact path="/productdetail/:id" component={ProductDetail} />
        </Switch>
      </Router>
    );
  }
}

컴포넌트로 분리된 것에 페이지 scroll event 발생하기

Nav conponent를 scroll위치에 따라 다르게 표현하고 싶어서 하기와 같이 코드를 정리하였습니다.
하기와 같이 코드 작성시, 부모가 되는 컴포넌트로 부터 따로 scroll 위치를 받지 않지 않아도 window.pageYOffset 로 가져올 수 있습니다.

componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll);
    this.getDropdownMenuData();
    this.getIconData();
  };

  componentWillUnMount = () => {
    window.removeEventListener('scroll', this.handleScroll);
  };

  handleScroll = () => {
    this.setState({
      isNavTransparent: !window.pageYOffset > 0,
    });
  };