[6] 리팩토링(refactoring) - 중복의 제거, this 키워드

리팩토링(Refacotring)이란?

팩토리(factory, 공장) + re(다시) : 공장으로 다시 보내서 좀 더 개선한다.

 

코딩 후, 코드의 비효율적인 면이 생길 수 있다.

코드를 효율적으로 만들어서 코드의 가독성을 높이고, 유지보수가 편리하도록, 중복된 코드를 낮추는 이러한 방향으로 코드를 다시 개선하는 작업.

 

- 코드의 효율성
- 가독성
- 유지보수의 편리성
- 중복된 코드 (제거)

 

틈틈이 리팩토링 해야 좋은 프로그램을 만들 수 있다.!! 

 

목표 : 비효율적인 코드를 제거하는 리팩토링 사례를 학습

 

night_day 버튼을 복사해서 웹페이지 하단에서도 동작하도록 하고 싶다.

input id="night_day" 태그를 복사하여 하단에 붙여넣기한 뒤 실행해보면?

01

클릭한 버튼으로 버튼의 value 값이 바뀌는 대상은 첫번째 버튼

 

클릭한 버튼으로 버튼의 value 값이 바뀌는 대상은 첫 번째 버튼이다. 

why?

동일한 id 값을 사용했기 때문!

붙여 넣은 두 번째 버튼의 id 값을 'night_day2' 라고 수정하면 정상적으로 동작한다.

 

01

해당 버튼이 정상적으로 동작

 

this 키워드

자기 자신을 가리키는 키워드

 

하지만, 불편함이 발생.

이러한 버튼을 1억 개 복사한다.?

이 코드가 속해있는 태그, 즉 여기에서는 input 태그이다. 이 태그를 가리키도록 약속되어있는 특수한 키워드가 있다. -> "this"

 

이 코드는 사실상 자기 자신을 가리키고 있다. (onclick 이벤트가 속해있는 태그 자신)

document.getElementById('#night_day2')

 

this로 변경하면 더 이상 태그에 id값을 사용하지 않으므로 삭제.

 

<!-- 수정 전 코드 --> 
 <input id="night_day2" type="button" value="night" onclick="
  if(document.quertySelector('#night_day2').value === 'night'){
    document.querySelector('body').style.backgroundColor = 'gray';
    document.querySelector('body').style.color = 'white';
    document.quertySelector('#night_day2').value='day';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.quertySelector('#night_day2').value='night';
  }
  "> 
 
<!-- 수정 후 코드 --> 
 <input type="button" value="night" onclick="
  if(this.value === 'night'){
    document.querySelector('body').style.backgroundColor = 'gray';
    document.querySelector('body').style.color = 'white';
    this.value='day';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value='night';
  }
  ">

 

정상적으로 동작하면서, 코드가 훨씬 간결해졌다.

이 코드를 복사해서 다른 부분에 사용하여도 코드의 수정이 필요 없어짐. 효율성이 올라감!! => 유지보수하기 쉬워짐.

 

코딩을 잘하는 방법?

중복을 끝까지 쫓아가서 없앤다!!!

 

중복된 코드를 변수를 사용하여 제거한다.

<!-- 수정 전 코드 --> 
 <input type="button" value="night" onclick="
  if(this.value === 'night'){
    document.querySelector('body').style.backgroundColor = 'gray';
    document.querySelector('body').style.color = 'white';
    this.value='day';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value='night';
  }
  ">
 
<!-- 수정 후 코드 --> 
  <input type="button" value="night" onclick="
  var target = document.querySelector('body');
  if(this.value === 'night'){
    target.style.backgroundColor = 'gray';
    target.style.color = 'white';
    this.value='day';
  }else{
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value='night';
  }
  ">

코드가 간결하고 효율적으로 수정되었다.