04. Props and State

리액트에서 props와 state는 데이터를 다루는 개념이다.

공식문서
props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다.
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. 
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

Props are Read-Only

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다.
모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다.
순수 함수란 전달된 인자가 변경되지 않고 인자 그대로를 가지고 활용되는 것이다.

function sum(a, b) {
  return a + b;
}

순수 함수는 입력값을 바꾸려하지 않고 동일한 입력값에 대한 결과를 반환한다.

function withdraw(account, amount) {
  account.total -= amount;
}

반면 순수 함수가 아닐 경우에는 입력값을 변경하게 된다.

즉 전달된 데이터는 자식 컴포넌트에서 확인할 수 있지만 변경할 수는 없다.
컴포넌트에 속성처럼 데이터를 지정해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 수 있다.

Using State Correctly

직접 state를 수정하지 마세요.

// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});

this.state를 지정하는 곳은 오직 constructor 이다.

state 업데이트는 비동기적일 수 있습니다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안된다.
state 값 자체를 의존하게 되면 비동기적인 호출에서 값을 제대로 가져올 수 없게 된다.

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

함수 인자를 사용하는 setState()로 첫번째 인자는 이전 state를, 두번째 인자는 업데이트가 적용된 시점의 props로 받아 수정 가능하다.

state 업데이트는 병합됩니다.

예를 들어, state에 다양한 독립적인 변수가 있다면 setState() 호출로 변수를 독립적으로 업데이트 할 수 있다.

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

병합은 얕게 이뤄지기 때문에 this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 완전히 대체된다.

The Data Flows Down

어떤 컴포넌트도 자신이 가진 데이터가 어디서 왔는지 알 필요가 없다.
오로지 state를 설정한 컴포넌트에서만 해당 state에 접근이 가능하고 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.
모든 state는 자신을 소유한 컴포넌트를 가지고 있고, 자신의 자식 컴포넌트에게만 영향을 끼칠 수 있다.
이것을 "하향식(top-down)" 또는 "단방향식" 데이터 흐름이라고 한다.