onScroll 이벤트 후 구성 요소 스타일 설정

1. 클래스 구성 요소에 대한 React onScroll 이벤트
2. 기능 구성 요소에 대한 React onScroll 이벤트

React 애플리케이션을 개발할 때 종종 사용자의 입력을 듣고 그에 따라 상태를 업데이트해야 합니다. 예를 들어, 현재 사용자 보기에 있는 구성 요소를 강조 표시할 수 있습니다.

구성 요소의 스타일을 조건부로 업데이트하려면 인라인 구성 요소 또는 styled-components 라이브러리와 같은 CSS-in-JS 솔루션을 사용하는 것이 좋습니다.

계속 진행하기 전에 scroll 이벤트에 대한 이벤트 리스너를 설정해야 합니다. window.addEventListener('scroll'). 그런 다음 스크롤 이벤트에 대한 핸들러 함수를 정의할 수 있습니다.

클래스 구성 요소에 대한 React onScroll 이벤트

약간 다른 디자인에도 불구하고 React 클래스 구성 요소는 기능 구성 요소와 매우 유사합니다. 둘 사이의 한 가지 큰 차이점은 클래스 구성 요소에 후크가 없다는 것입니다. 대신 수명 주기 방법 중 하나를 사용할 수 있습니다.

componentDidMount()

일을 단순하게 유지하기 위해 가장 예측 가능한 동작으로 수명 주기 방법을 사용하겠습니다. scroll 이벤트에 대한 리스너를 설정한 후 window.addEventListener() 메서드에 대한 두 번째 인수로 핸들러를 전달해야 합니다. 그런 다음 수명 주기 메서드 내에서 핸들러를 호출해야 합니다. playcode.io에서 이 예를 살펴보겠습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      fontSize: 16
    }
    this.handleScroll = this.handleScroll.bind(this)
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };
  handleScroll(event)  {
    this.setState({fontSize: window.pageYOffset})
  }
  render() {
    return <div style={{height: "150vh", width: "80vw", fontSize: this.state.fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;
  }
}

<div> 요소가 스크롤될 때마다 상태 변경으로 인해 구성 요소가 다시 렌더링됩니다. 핸들러는 창 개체의 pageYOffset 속성을 기반으로 상태를 업데이트합니다. window.pageYOffset의 이 값은 얼마나 아래로 스크롤했는지 보여줍니다.

playcode.io로 이동하여 직접 사용해 보세요. 아래로 스크롤할수록 글꼴이 커집니다.

기능 구성 요소에 대한 React onScroll 이벤트

스크롤 이벤트를 기반으로 변경 사항을 트리거하려면 먼저 이 이벤트에 대한 리스너를 설정해야 합니다. 이것은 window.addEventListener('scroll') 메소드를 호출하여 수행할 수 있습니다. 호출에서 수신 대기 중인 이벤트 유형을 지정하는 문자열을 전달해야 합니다. 이 경우 'scroll'을 전달합니다. 두 번째 인수는 이벤트 핸들러에 대한 참조여야 합니다.

useEffect()

useEffect()는 모든 클래스 구성 요소의 수명 주기 후크의 조합으로 생각할 수 있습니다. 이 경우 componentDidMount() 후크의 동작을 복제하기 위해 빈 배열을 두 번째 인수로 전달합니다. 예시:

const [fontSize, setFontSize] = useState(0);
const handleScroll = () => setFontSize(window.pageYOffset)
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
  }, []);

fontSize 변수의 값은 동적으로 변경됩니다. 인라인 스타일에서 참조하여 요소의 스타일을 변경할 수 있습니다.

<div style={{height: "150vh", width: "80vw", fontSize: fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;

this.state 객체가 아니라 기능 구성 요소의 상태 변수에 대한 간단한 참조를 전달합니다.