React - 페이지 스크롤후 특정 액션 실행시키는 방법, 컴포넌트 위치에 따라 특정 액션 실행시키는 방법

React 

:페이지 스크롤 후 특정시점에 액션 실행시키는 방법, 

특정 컴포넌트의 브라우저 위치에 따라 특정 액션 실행시키는 방법

| 시작하기에 앞서

• 스크롤시에, 특정시점 (1. 웹 페이지를 특정영역만큼 스크롤 했을때 2. 컴포넌트가 브라우저상에서 특정 위치에 위치해 있을때)에 navbar의 css 클래스를 변경시켜줘서 기본 display none인 nav bar를 css를 업데이트 시켜줘서 상단에 보이게하는등과 같이 구현할때 활용하면 좋은 예제이다.

• 1. 웹페이지를 특정역역만큼 스크롤했을때는 compononentDidMount에서 스크롤 이벤트를 등록하고, onScroll 메소드를 활용해서 state를 스크롤할때마다 업데이트하여 이를 활용하는 방식으로 기능을 구현하면 된다.

• 2.컴포넌트가 브라우저 상에서 특정 위치에 있을때 특정 기능을 구현하고 싶으면 shouldComponentUpdate 메소드를 참고하여, ReactDOM.findDOMNode(this).getBounding....().top 메소드를 활용해서 컴포넌트의 상단 위치영역 값을 찾고, 브라우저 상에서 컴포넌트의 최상단이 가려지면 (top<0) 특정 액션을 실행해주는 식으로 기능을 구현하면 좋을것 같다. 
• shouldComponentUpdate 에 들어가는이유는 onscroll 메소드로 scroll top을 계속 업데이트 해주고있기 때문에 가능한것이다. 하지만 의미없는 state 업데이트를 계속 해주고 있으므로, 좋지못한 방법인것 같다. 
• 스크롤 위치와 상관없이, 브라우저상에서 특정 컴포넌트 위치만 신경써서 특정 기능을 구현하고 싶으면 const top =ReactDOM.findDOMNode(this).getBounding....().top  과 같이 할당하여 이 top을 setState로 업데이트 해줘서, shouldComponentUpdate 메소드에서 nextState에서 top을 체크하여 기능을 구현하면 더 좋을것 같다.

  componentDidMount() {
    // 스크롤 이벤트 적용
    window.addEventListener('scroll', this.onScroll);
  }
​
  shouldComponentUpdate(nextProps, nextState) {
    //example 특정컴포넌트의 최상단(top)이 스크롤하여 가려져서 안보이게 되면(top<0) 특정 액션 실행하는 메소드
    const top = ReactDOM.findDOMNode(this).getBoundingClientRect().top; 
    (top < 0) && 특정 액션 실행;
    return true;
  }
​
​
  onScroll = (e) => {
    // 스크롤 할때마다 state에 scroll한 만큼 scrollTop 값 증가하므로 이를 업데이트해줌, 
    //따라서 스크롤 시점에 따라 특정액션을 추후에 state를 활용하여 구현 가능
    const scrollTop = ('scroll', e.srcElement.scrollingElement.scrollTop);
    this.setState({ scrollTop });
  };
​

| 적용하면 좋을 상황

• 스크롤시 특정 영역에 도달했을때 navbar가 나오게 할때
• 특정 컴포넌트에 스크롤 하여 위치했을때 navbar에서 그영역에 css로 focus를 줄때
• 스크롤후 특정시점에 sidebar를 position을 fix로 하여 고정시킬때