State(상태)

컴포넌트 UI를 위한 데이터를 보관하는 오브젝트

• state(상태)를 통해 데이터가 업데이트가 발생하면 리액트가 자동으로 render()를 호출
• state는 컴포넌트가 소유한 로컬 데이터로 적용 범위는 현재 컴포넌트에 한정된다.
• 컴포넌트는 자신의 state를 초기화하거나 업데이트 할 수 있다.
• state는 불변(Immutable) 객체이다.
  • 즉, 객체에 변형을 가해선 안된다.
  • 변형을 가하는 대신, 비교를 통해 교체하는 방법을 사용해 불변 객체를 유지한다.
    

Immutable 객체의 사용 이유

일반적으로 객체가 참조를 통해 공유되어 있다면 상태가 언제든지 변경 될 가능성도 커져 문제가 제기된다.
반면 불변 객체는 객체를 복제할 때 객체 전체가 아니라 단순 참조만 복사하고 끝낸다.
참조는 보통 객체 그 자체보다 훨씬 작아서(전형적으로 포인터 크기), 메모리가 절감되며 프로그램 성능 향상에도 도움이 된다.

불변 객체인 state(상태)를 관리하기 위한 방법

• setState() 메소드를 제공받아 사용한다.
• setState() 메소드를 사용하면 state를 비교하되, 불변 객체를 유지하면서 상태를 업데이트 한다.

this.setState({
  activeIndex: this.state.activeIndex + 1
})

• 상태 업데이트 전 계산이 필요한 경우 함수를 전달하기도 한다.

this.setState((prevState, props) => {
  // 새로운 상태를 반환하기 전 계산 처리
  const changeIndex = props.changeIndex * 2
  
  // 계산 이후 새로운 상태 객체 변환
  return {
    activeIndex: prevState.activeIndex + changeIndex
  }
})

state(상태) 업데이트 이후 콜백

컴포넌트 상태 업데이트가 이뤄진 후, 뭔가를 수행해야 한다면 콜백함수를 설정해 처리

this.setState(
  // 상태 업데이트
  { activeIndex: this.state.activeIndex + 1},
  // 콜백 함수 설정 (ops)
  () => console.log('업데이트 되었다.')
  )

React 컴포넌트 상태 업데이트는 동기 처리가 아니라, 비동기 처리
즉, 상태 업데이트는 즉시 발생하지 않는다
따라서 상태가 업데이트되기 전에 코드 일부가 실행되는 시나리오에 직면하게 된다.
이러한 문제를 해결하기 위해 콜백함수를 제공하는 것

Props(속성) vs State(상태)

컴포넌트는 외부로 부터 props(속성)을 전달 받아 사용할 수 있지만 전달 받은 속성은 읽기 전용(Readonly)으로 값을 업데이트 할 수 없다.

UI는 사용자의 요구에 의해 수시로 변한다.
웹 화면을 업데이트 하려면 외부로부터 전달받은 props는 읽기 전용이므로
변경 가능한 컴포넌트의 state가 필요하다.
즉, 업데이트가 필요한 컴포넌트는 state(상태)를 설정해 사용해야 한다.