props가 객체를 요소로 가지는 배열인 경우, 하위 컴포넌트에서 state 값을 변경했는데 props값이 변경되는 경우

   리액트에서는 기본적으로 props는 read-only이기 때문에 하위 컴포넌트에서 props를 변경할 수 없다. 그래서 하위 컴포넌트에서 setState를 이용해 state 값을 변경하더라도 props가 변경되지 않는다.

 하지만, props를 객체를 요소로 가지는 배열로 전달하면 하위 컴포넌트에서 그 배열을 수정하면 부모 컴포넌트에서 전달한 객체도 변경될 수 있다. 이는 배열이나 객체는 참조 타입이기 때문이다.

 고로, 배열이나 객체를 props로 전달하면 하위 컴포넌트에서 그 값을 수정하면 부모 컴포넌트의 값도 수정되므로 주의해야한다.

따라서, 하위 컴포넌트에서 값을 변경해야 할 경우에는 부모 컴포넌트에서 새로운 객체나 배열을 생성하여 하위 컴포넌트로 전달하는 것이 좋습니다.

  예를들어, 부모 컴포넌트에서 배열을 생성하고 하위 컴포넌트에서 그 배열을 사용하면 하위 컴포넌트에서 배열을 수정하면 부모 컴포넌트에서 전달한 배열도 수정될 수 있다.

const arr = [1,2,3];
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent data={arr} />
  }
}
class ChildComponent extends React.Component {
  // do something with this.props.data, then change it
  this.props.data.push(4);
}