[React] State

State 란?

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야 할 때 사용
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용
• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

props에서 state로 이동

1. render() 메서드 안에 있는 this.props.date를 this.state.date로 변경
2. 초기 this.state를 지정하는 class constructor를 추가 → 어떻게 props를 기본 constructor에 전달하는지 유의
3. 클래스 컴포넌트는 항상 props로 기본 constructor를 호출
4. root.render(<Clock date={new Date()} />); 요소에서 date prop을 삭제 → root.rander(<Clock />);

• State를 올바르게 사용하기
  1. 직접 State를 수정하지 마세요.
  2. this.state를 지정할 수 있는 유일한 공간은 바로 constructor!
  3. State 업데이트는 비동기적일 수도 있습니다.
  4. React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다.
  5. State 업데이트는 병합된다. state는 다양한 독립적인 변수를 포함할 수 있다.
  6. 별도의 setState() 호출로 이러한 변수를 독립적으로 업데이트할 수 있다.
  7. setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

데이터는 아래로 흐른다.

부모 컴포넌트나 자식 컴포넌트 모두 특정 컴포넌트가 유상태인지 무상태인지 알 수 없고, 그들이 함수나 클래스로 정의되었는지에 대해 관심 가질 필요가 없다.

이 때문에 state는 종종 로컬 또는 캡슐화라고 불린다. state가 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트에도 접근할 수 없다.

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

<FormattedDate date={this.state.date} />

FormattedDate 컴포넌트는 date를 자신의 props로 받을 것이고 이것이 Clock의 state로부터 왔는지, Clock의 props에서 왔는지, 수동으로 입력한 것인지 알지 못합니다.

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

일반적으로 이를 ‘하향식’ 또는 ‘단방향식’ 데이터 흐름이라고 한다.

모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 “아래”에 있는 컴포넌트에만 영향을 미친다.

트리구조가 props들의 폭포라고 상상하면 각 컴포넌트의 state는 임의의 점에서 만나지만 동시에 아래로 흐르는 부가적인 수원(water source)이라고 할 수 있다.