[React] setState and Lifecycle

function component

//function component
function App() {
	return (   ) ;
}

return 한 값을 screen 에 표시

 

class component

React class component 에서 가져온 APP component

//App은 react component
class App extends React.Component{
	
    render( 
    	return ()
    ) ;

}

React component에서 확장한 것들을 screen에 표시

react가  render() 메서드를 자동으로 실행 

 

class component를 사용하는 이융

state : object ,data를 넣을 공간이 있음 

 

data는 항상 변하기 때문에 state와 같은 공간 이 필요

state(상태)가 변경될 때마다 React 가 render를 다시 해야 함 

 

 

---

 

 

setState

state가 변경되면 

state refresh   ->  render function 실행

state 와  함꼐 render function 을 계속 재호출함 

 

 

render()  메서드

React componet가 가지고 있는 메서드 

react는 render메서드를 바로 실행시킴

 

<예시코드 >

class App extends React.Component{
  
  state = {
    count:0
  };

  add = ()=>{

    this.setState({count: this.state.count+1 });
  };

  minus = ()=>{

    this.setState({count:this.state.count- 1 })

  };
  render(){
    return (
      <div>
        <h1> The number is: {this.state.count} </h1>
        <button onClick = {this.add}> Add</button>
        <button onClick={this.minus}>minus</button>
      </div>

    );
  }
}

 

state 변경에 따라 render 하는 동작 가능 

하지만 이건 좋지 않은 코드 -> state에 의존하기 때문 (this.state.count)

 

 

⭐️current 함수를 사용 

  add = ()=>{

    this.setState(current =>({count: current.count+1 }));
  };

  minus = ()=>{

    this.setState(current=>({count: current.count- 1 }))

  };

 

 

setSatate 호출  -> state 값 갱신  -> render function 실행 

 

 

---

render 외 호출되는 함수  (중요하지 않은것들 처리) 

Mounting()

component 표시

 - constructor()

 - getDerivedStateFromProps()

 - render()

 - componentDidMount()

 

component가 mount -> screen 표시 -> constructor -> render -> componentDidMount()

 

 

Updating()

componentr가 개발자에 의해 state가 변경 

 - getDerivedStateFromProps()

 - shouldComponentUpdate()

 - render()

 - getSnapshotBeforeUpdate()

 - componentdidUpdate()

 

Unmounting()

component없애기 ( 페이지 변경 시)

 - componentWillUnmount()

 

 

 componentDidMount(){
    console.log("component rendered")
  }
  componentDidUpdate(){
    console.log("I justupdate");
  }
  componentWillUnmount(){
    console.log("goodbye");
  }
  render(){
    console.log("i am rendering");
    return (
      <div>
        <h1> The number is: {this.state.count} </h1>
        <button onClick = {this.add}> Add</button>
        <button onClick={this.minus}>minus</button>
      </div>

    );
  }

이렇게 호출되었을 때 

 

i am rendering    ->   component rendered    ->  (버튼 클릭 = state 변경)    -> i am renderging   ->   I justupdate

componentDidMount()   ->   componentDidUpdate()

순으로 동작 

 

---

 

React의 LifeCycle  메서드 

React의 life cycle 메서드를 이용하여 특정 시점에 코드가 실행되도록 설정할 수 있음 

 

❖ componentDidMount()

처음 render 시 가장 먼저 호출되는 life cycle 메서드

 

class App extends React.Component{


  state={
    isLoading: true,
    movies:[]
  };
  
  
  componentDidMount(){
    setTimeout(() => {
      this.setState({isLoading:false})
    }, 6000);
  }
  
  
  render(){
    const {isLoading} = this.state;
    return (
      <div>
        {isLoading? "Loading...":"We are ready"}
      </div>

    );
  }

코드에 따라 render 시

Mount() 진행 ( constructor() -> render() -> componentDidMount() )

동작설명

 : isLoading은 현재 true이고   ->  6초후 isLodaing의 값에 flase 지정   ->   state가 refresh 되면서 재 render  

 

 

 

 

ko.reactjs.org/docs/react-component.html

React.Component – React