[Angular] 클릭 이벤트 재랜더링 막기

<a href (click)="voteUp()">
  <i class="arrow up icon"></i>
upvote
  </a>

앵귤러를 공부하는데 이런 예제가 나왔다.
upvote라는 글자를 클릭 시 voteUP()이라는 함수를 호출해 votes(현재10)변수를 +1하시오~

export class ArticleComponent implements OnInit {
  title: string;
  link: string;
  votes: number;

  constructor() {
    this.title = 'Angular 2';
    this.link = 'http://angular.io';
    this.votes = 10;
  }

  voteUp() {
    this.votes += 1;
  }

근디 실제로 upvote를 클릭하면 votes(현재10)에 +1이 되긴 하지만 화면이 새로고침(재랜더링)된다.

🤔 결론! 재랜더링을 막는 방법?

재랜더링을 막아줄 방법이 필요할 듯 한데..
결론부터말하면
호출되는 함수에 return false를 달아주면 된다.

  voteUp() :boolean {
    this.votes += 1;
    return false;
  }

이제 어떻게 해결하면 되는지는 알았고, upvote를 클릭하면 왜 페이지가 새로고침되는지 이유를 알아보자!

🤔 upvote를 클릭하면 재랜더링되는 이유?

js는 기본적으로 click이벤트를 모든 부모 컴포넌트로 전파한다. 이런 현상을 이벤트 버블링이라고 한다.

그래서 이벤트 버블링 때문에 브라우저는 빈 링크를 따라가려고 하고, 그 결과 브라우저에 페이지가 다시 로드되는 것!

이 문제를 해결하려면 클릭 이벤트 핸들러가 false값을 리턴하도록 해야 한다.
그래야 브라우저가 페이지를 새로고침(재랜더링)하지 않는다!

여기서 또 이런 궁금증이 생길 수 있을 것이라고 생각한다.
왜 return fasle를 써줘야 하는걸까?
그냥 void로 리턴을 하지 않거나 return; 으로 마무리하면 안되는걸까?
이런 방식들은 다른 오류를 만들어낼 수 있당.
자세한 내용은 여기를 참고하면 될 것 같다 ㅎㅎ

ps. 책보고 공부중인디 return false가 모딩 하고 삽질햇더니 바로 뒷장에서 설명해주신다..

책을 꼼꼼히 보자...

# Summary

호출되는 함수에 return false;를 달아주자!
자세한 내용은 여기를 참고하자!