2020-02-05 TIL

2020-02-05

구조분해 할당과 redux

구조분해 할당 = destructuring

class Foo extends Components {
// ...
  componentDidMount () {
    const { memberObject } = this.props;

    dispatchActionChangingMember(); // redux store의 memberObject를 조작하는 액션

	console.log(this.props.memberObject === memberObject);
	// true or false?
  }
// ...
}

const mapStateToProps = state => {

  return {
    memberObject: state.memberObject,
  };
};
// ...

이 코드는 아래 설명을 위해 개념적으로만 구현한 것임.

위 코드에서 콘솔 출력은 true일까, false일까?

false다.

중간에 스토어 조작이 없었다면 true일 수 있었다.

redux store에 속한 memberObject를 조작하는 액션이 발생했고, memberObject는 새 객체로 갱신된다. (이 때 the only source-of-truth인 redux store 객체 역시 새로 갱신되어 다른 오브젝트가 된다.)

구조분해 할당을 하는 순간 store에서 memberObject의 주소를 가져온다. 이 주소는 memberObject라는 새 const 변수에 할당되었다. 액션이 일어나서 store object의 memberObject 즉 this.props.memberObject는 다른 객체가 되고, 내용도 변경되었다.

그런데 미리 할당해두었던 memberObject를 참조해 화면에 그린다면, 액션이 일어나기 전 객체를 참조하므로 값이 초기값으로 비어있는 등 의도치 않은 값을 보여주게 된다.

난 구조분해가 할당이라는 사실을 잊고있었고 이 현상을 발견했을 때 너무나 이해가 되지 않았다. (이 버그를 발견하게 해준 가설은 이와 다른 것이었다.)

redux가 성실하게 매번 store를 갱신하고, 이전 store 객체를 persist하게 유지 해주기 때문에 이런 일이 생기는 것. (덕분에 time-traveling debugging이 가능.)

내가 버그를 낸건 아니었지만 이번에 알게되지 않았다면 내가 언젠가 똑같은 버그를 만들었을 것임! 예방주사를 맞은 느낌이다.