[React] State

 

#11 State

<function componenet, class function 차이>

- function component

function이고 어떤 것들 return 한 후 screen에 표시 

 

- class function 

class지만 react component로부터 확장되고 screen에 표시

 

 

• class componenet

자동적으로 class component의 render method를 실행한다

 

 

• state에 바꾸고 싶은 data 넣는다

 add = () => {
    this.state.count = 1;
  };

➣ state 변경하고 있지만 state는 동작하지 않는다

∵ react는 render function을 refresh 하지 않기 때문

∴ state의 상태를 변경할 때 react가 render function 호출해서 바꿔야 한다

 

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

 

➣ setState 호출 시 react는 새로운  state와 함께 render function 호출

 

 

 

• life cycle method

react가  component를 생성, 없애는 방법

component가 render 전, 후 다른 function이 존재한다

 

• mounting (태어나는 것)

- constructor() 먼저 호출 (js에서 class 만들 때 호출되는 것)

ex) component가 mount 될 때, component가 screen에 표시될 때, component가 Website 갈 때

 

• Updating 

- componentDidUpdate (처음 render하면 호출되는 life cycle method)

setStae 호출 시, component 호출 → render 호출 → 업데이트 완료 → componentDidUpdate 실행

 

• Ummounting (component가 죽는 걸 의미)

- componentWillUnmount

component가 떠날 때 호출된다