React State, updater 함수, props, state, updating component 생명주기, DOM vs React

State

props는 수정될 수 없는 Read-Only이다. 반면에 state는 수정될 수 있는 값으로, state가 수정되면 ReactDOM.render 메서드가 호출되어 DOM이 업데이트된다. 즉, DOM을 업데이트해야 한다면 ReactDOM.render 메서드를 다시 호출할 필요 없이 state값을 업데이트 하면 된다.

State 사용하기

1. state를 사용하기 위해서는 클래스형 컴포넌트를 사용해야 한다.
2. props를 state로 변경하기
3. 컴포넌트 생명주기 메서드에서 state 사용하기

State 유의사항

1. this.setState
   state를 업데이트하기 위해서는 반드니 setState
   setState(updater,[callback])
   변경된 state 내용을 Queue에 넣고, React에 다시 렌더링해야 한다고 알림
   → 지연시켰다가 여러 개의 컴포넌트를 한 번에 업데이트
   → this.setState 메서드가 호출된 직후 state가 업데이트되었다는 것을 보장 못한다.
   → 즉시 실행하려면
   componentDidUpdate 또는 setState 콜백 함수

componentDidUpdate(prevProps, prevState){
  console.log("componentDidUpdate", prevState, this.state);
}

2. this.setState({ : });
   setState 메서드를 이용하여 state를 수정해야 한다.

// 잘못된 방법
this.state.comment='hello'

// 옳은 방법
this.setState({
  comment: 'hello'
});

3. 이전 state를 사용하여 다음 state를 업데이트하기위해서 this.setState의 인자가 객체가 아닌 함수 형태!

this.setState((prevState, props)=>({
  counter: provState.counter+props.increment
  )});

4. 병합(merge)하여 업데이트하기

updater 함수

setState를 호출하게 되면 첫 번째 setState와 두 번째 setState가 한 사이클 안에서 호출되기 때문에 두 setState는 일괄 처리하게 된다. 다음 state가 이전 state에 따라 업데이트하고 싶다면 updater함수를 사용하면 된다.

class TestComponent extends React.Component{
  constructor(props){
    super(props);
    this.state={quantity:1};
  }
  
 componentDidMount(){
   this.setState((prevState, props) =>{
     return {quantity: prevState.quantity +1};
   });
   this.setState((prevState, props) =>{
     return {quantity: prevState.quantity +1};
   });
 }
  render(){
    return(
      <div>quantity: {this.state.quantity}</div>
);
}
}
ReactDOM.render(
  <TestComponent number="2" />,
  document.getElementById('root')
);

props, state, updating component 생명주기

1. componentWillReceiveProps
2. shouldComponentUpdate - update판단 return false면 실행 X
3. componentWillUpdate
4. render
5. componentDidUpdate

state update 경우 1.X 바로 2. 호출

componentWillUpdate 메서드 안에서 this.setState를 호출하게 되면 무한루프에 빠진다. props의 변화에 따라 state를 변경해야 할 경우 componentWillReceiveProps 메서드를 사용해야 한다.

DOM vs React

// DOM
// .addEventListener 사용
// 이벤트 동작 막기 return false;
<button onclick= "eventHandler()"> // 문자열
  
// React
// 이벤트 핸들러 정의
// 이벤트 동작 막기 e.proventDefault();
<button onClick={eventHandler}></button> // 함수