state

state

---

Dynamic information  은 변할 수 있는 정보이다.

 

리엑트 컴포넌트는 렌더하기위해서 다이나믹정보가 종종 필요할것이다. 

예를들어, 농구게임의 스코어를 보여줄 컴포넌트를 상상해봐라.

게임의 스코어는 시간에 따라 변하며, 이것은 스코어가 dynamic하다는 것을 의미한다. 

우리의 컴포넌트는 유용한 방법으로 렌더하기 위해서 다이나믹 정보의 조각인 스코어를 알아야 할 것이다. 

 

컴포넌트가 동적정보를 얻기 위한 두가지 방법이 있다. : props 와  state

 

props와 state 제외하고 컴포넌트에 사용되는 모든 값은 항상 정확하게 같음을 유지해야한다. 

 

당신은 props에 대해 긴 레슨동안 배웠다. 

지금은 state에 대해 배울 차례이다. 

props와 state는 interating한 리엑트컴포넌트의 환경설정에 필요한 것들이다. 

 

Setting Initial State

---

리엑트 컴포넌트는 두가지 방법으로 다이나믹한 정보에 접근할 수 있다. : props 와 state

 

props와 달리, 

컴포넌트의 state는 외부로부터 전달되지 않는다. 

컴포넌트는 자신의 state를 결정한다. 

 

컴포넌트가 state를 가지도록 만들기위해, 

컴포넌트에 state property를 주어라. 

 

이 property는 아래와 같이 constructor method의 내부에 선언되어져야 한다. 

 

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mood: 'decent' };
  }

  render() {
    return <div></div>;
  }
}

<Example />

 

와우.. constructor method? super(props)? 여기에 뭔일이 일어난거야?

 

이 생소할 수 있는 코드를 좀 더 자세히 살펴봅시다.

 

constructor(props) {
  super(props);
  this.state = { mood: 'decent' };
}

 

위의 예시와 같이 this.state는 object와 같아야 한다. 

이 객체는 컴포넌트 인스턴스의 초기 "state"를 나타낸다.  (이부분은 나중에 더 다룰것이다)

 

코드의 나머지 부분은 어떠한가?

constructor와 super는 모두 REACT의 고유한 것은 아니고 ES6의 형태이다. 

그들의 사용에 대해 특별히 Reacty한것은 없다. 

그들의 기능의 설명은 이 과정의 범위를 벗어난다. 그러나 

우리는 당신스스로 친숙해지기를 원한다. familiarizing yourself.

 

15. Classes

적절하게 셋업되기 위해서 그들의 constructor안에서 리엑트 컴포넌트는 항상 super를 호출해야하는 것은 매우 중요하다.

 

---

Props and State

• props
  props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
  props는 읽기 전용 데이터라고 생각하면 된다.
  자식 컴포넌트에서 전달 받은 props를 변경이 불가능하고 props를 전달해준
  최상위 부모 컴포넌트만 props를 변경할 수 있다.

 

• state
  state는 동적인 데이터를 다룰 때 사용한다.
  사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용한다.
  state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라
  다른 컴포넌트의 직접적인 접근은 불가능하다.
  그러나 자신보다 상위에 있는 state는 변경이 가능한데 state를 변경해주는 함수를 props로 받는다면
  state의 변경이 가능하다.
  주의해야할 점은 props로 넘겨줄 때에 this의 binding을 신경써줘야 한다.

 

---

 

 

 

 

 

https://www.codecademy.com/courses/react-101/lessons/this-state/exercises/initial-state

| Codecademy