2023.05.03 리액트

 

.app

import React from "react";

import Counter2 from "./03/Counter2";

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 1,

};

}

increaseCount() {

this.setState(({ count }) => ({ count: count + 1 })); //앞서 받은것 다음것으로 바꿔 리턴

}

render() {

return (

<Counter2

count={this.state.count}

onAdd={this.increaseCount.bind(this)}//bind

/>

);

}

}

export default App;

.

import React, { Component } from "react";

import { Button } from "reactstrap";

class Counter2 extends Component {

render() {

return (

<div>

현재 카운트: {this.props.count}

<Button onClick={() => this.props.onAdd()}>카운트 증가</Button>

</div>

);

}

}

export default Counter2;

.

.

import React, { Component } from 'react';

import "../App.css";

class ScrollSpy extends Component {

constructor(props){

super(props);

this.setRef = this.setRef.bind(this);

this.checkPosition = this.checkPosition.bind(this);

window.addEventListener('scroll', this.checkPosition);

}

setRef(ref){

this.ref = ref;

}

checkPosition(){

if(this.ref.getBoundingClientRect().top < window.innerHeight){

console.log('enter');

} else {

console.log('exit');

}

}

componentDidMount(){

this.checkPosition();

}

componentWillUnmount(){

window.removeEventListener('scroll', this.checkPosition);

}

render() {

return (

<>

<div style={{height:1000}}>test</div>

<div ref={this.setRef}>

The start of page

{/* <p className='test1'>The end of page</p> */}

</div>

</>

);

}

}

export default ScrollSpy;

.

.

.