State

State vs Props

props는 컴포넌트 에 전달되는 반면 state는 컴포넌트 안에서 관리된다.

this.state

this.state 는 렌더링된 값, 즉 현재 화면에 노출되는 값을 말한다. 모든 컴포넌트는 자신의 이벤트 핸들러에서 setState()를 호출할 때까지 리렌더링을 하지 않고 this.state를 업데이트하지 않는다.

State Lifecycle

1. Mounting : 컴포넌트가 DOM에 렌더링될 때
2. Unmounting : 생성된 컴포넌트가 DOM에서 삭제될 때

컴포넌트 클래스에서 메소드를 선언해서 컴포넌트가 마운트/언마운트 될 때 코드를 작동할 수 있다.

componentDidMount(){
  // 컴포넌트가 마운팅된 이후 작동
}
componentDidUnmount(){
  // 컴포넌트가 삭제되면 작동
}

컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용할 수 있다.

// Model Counter example
const [ count, setCount ] = useState(0)

function increment(){
  setCount(count + 1)
}

return (
  <div>
    <div>{count}</div>
    <button onClick={increment}>Increment</button> 
  </div>
)

항상 setState 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 setState 에 객체 대신 함수를 전달하는 것이 좋다.