[ReactJS] state

(함수 컴포넌트로 state를 표현하는방법은 react hooks라는 방법으로 표현을 할수가 있다.

이 부분은 좀더 공부하고 포스팅 해야 겠다.)

---

State

컴포넌트의 표현은 함수뿐만 아니라 클래스로 표현할수가 있다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const element = <Clock />;

consloe.log(element);

컴포넌트를 리액트 엘리먼트로 만들어 콘솔을 찍었을때 반환하는것들이다.

신기하건 type property에 해당 컴포넌트의 class가 그대로 들어간다.

아마도? 해당 엘리먼트 객체를 가지고  어느 시점에

type property로 Clock 객체를 만들기 위해 가지고 있는것 같다. (개인 의견입니다.)

constructor 부분에 this.state 를 보면 알수 있듯이 state property를 만들고 거기에 객체를 할당하는것을 볼수가 있다.

state는 컴포넌트에서 쓰는 어떤 data 인것이다. 하지만 props와는 조금 다른 특징을 가지고 있다.

• state를 지정할수 있는 유일한 공간은 constructor이다.
• state는 읽기 / 쓰기가 가능하다.
• state에 data를 update할때는 재할당의 방식을 사용하면 안된다.
• state에 data를 update할때는 setState() 함수를 사용해야 한다.

this.setState({data: 'new data'});

변경하고 싶은 property를 이런식으로 변경해주면 이전에 가지고 있는 state객체와 병합된다.

 

setState를 이용하여 업데이트 할때 이전 state값과 props로 온 data를 가지고 값을 만들수도 있다. 

예를들어,

this.setState({
  counter: this.state.counter + this.props.increment,
});

이런상황이 오면 state 값이 update될때와 props값이 새로 올때, 2가지를 처리해야 해서 값이 이상하게 될수가 있다.

이때는 인자로 콜백을 사용하면 된다.

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

콜백의 첫번째에는 state객체, 두번째는 props객체를 넘겨주면, 2가지 객체가 모두 업데이트 될때 함수가 실행된다.

---

Data Flow

부보의 컴포넌트가 state가 있던지 없던지 props가 있던지 없던지는 상관이 없다. 또한 그것이 data가 될수도 있다.

단지 부모 컴포넌트에서 자식컴포넌트로 data를 전해주면 (자식컴포넌트에 어트리뷰트로 data를 주면) data를 받은 컴포넌트는 그 data를 props로 사용하게 된다.

각 컴포넌트는 독립적인 '객체' 이므로 당연히 독립적으로 역할을 수행한다.

---

State and Lifecycle – React

A JavaScript library for building user interfaces

ko.reactjs.org