TDD-데이터 주입

데이터 주입

이제 +버튼을 클릭하면 카운트가 올라가고 뷰가 업데이트되게 구현했다

하지만 여기서 요구사항이 늘어난다면 어떻게 될까?

만약 값이 감소하는 버튼을 만들어달라고 한다거나 값이 제곱이되는 버튼, 2의 배수로 늘어나는 버튼...

데이터를 변경하는 기능이 추가될 때마다 각 모듈이 추가되어야한다

그렇게 모듈을 추가하게 되면 모듈간에 데이터를 공유해야하는데 그렇게 하기위해선 데이터를 주입해주어야한다

테스트 코드

  describe('App.ClickCounter',()=>{
  ...
    it('초기값을 주입하지 않으면 에러를 던진다', () => {

    })
  ...
  ...

ClickCounter describe의 내부에 데이터를 주입하지 않았을 때 에러를 발생시키는 테스트 코드를 먼저 작성하자

    it('초기값을 주입하지 않으면 에러를 던진다', () => {
        const actual = ()=> (App.ClickCounter());

        expect(actual).toThrowError();
    })

ClickCounter를 데이터 주입 없이 생성했을 때 에러를 기대하는 테스트 코드이다

실제 코드

App.ClickCounter = (_data) => {
  if(!_data) throw Error('_DATA');
  let value = 0

  return {
    getValue() {
      return value
    },

    increase() {
      value++
    }
  }
}

실제 코드에서는 첫줄만 추가해주면되는데 받아오는 데이터가 비어있을 경우 에러를 보내는 것이다

하지만 데이터를 주입받아서 관리하게 바뀌었으니까 내부 구조가 바뀌어야하는데

App.ClickCounter = (_data) => {
  if(!_data) throw Error('_DATA');

  const data = _data;

  data.value = data.value || 0;

  return {
    getValue() {
      return data.value
    },

    increase() {
      data.value++
    }
  }
}

내부에서 선언하고 사용하던 value 대신에 받아온 데이터 값을 내부의 data로 저장한뒤

  data.value = data.value || 0;

객체로 설정해 주는데

이 이유는 원시값으로 관리할 경우에 깊은 복사가 되어서 수정했을 때 주입받은 원본 data는 건드리지 못하게된다

그렇기 때문에 객체로 설정해서 얕은 복사를 유도한 후 데이터를 수정했을 때 모든 모듈이 공유하고 있는 원본 data의 값이 수정되게끔 만드는 것