작성한 질문수 3

1

props전달시보다는 메소드 실행을 예로 설명드리는 것이 좋을 것 같습니다.

다음과 같은 샘플 코드가 있다고 가정하겠습니다.

반복 블록을 이용해 lists 만큼 버튼이 생성되고

각각의 값을 할당받는 목록이 있다고 했을 때

handleClick 메소드를 화살표 함수 형태로 실행하면

일반적으로 원하는 결과 즉 클릭 했을 때 이벤트가 발생하고 하나의 값이 alert에 나타나게 됩니다 .

<script>
  let lists = [1,2,3,4,5]
	
  function handleClick(v) {
    alert(`value = ${v}`)
  }
</script>

{#each lists as value }
  <button class="btn" on:click={() => handleClick(value)}>
    Click me {value}
  </button>
{/each}

<style>
.btn {
  display: block;
}
</style>

하지만 다음과 같이 그냥 일반 함수 호출로 하고 실행시켜 보면

그냥 앱이 실행될 때 handleClick 이벤트가 호출되게 됩니다.

<script>
  let lists = [1,2,3,4,5]
	
  function handleClick(v) {
    alert(`value = ${v}`)
  }
</script>

{#each lists as value }
  <button class="btn" on:click={handleClick(value)}>
    Click me {value}
  </button>
{/each}

<style>
.btn {
  display: block;
}
</style>

따라서 이 두가지 케이스는 용도가 다릅니다.

화살표 함수를 이용할 경우에는 사용자가 어떤 이벤트를 실행시킬 때 전달인자를 넘겨서 실행시키는 경우에 사용하게 됩니다.

그리고 해당 컴포넌트가 실행될 때 마크업 영역에서 어떤 값과 함께 계산되어 출력되어야 한다면 화살표 함수가 아닌 일반 함수 호출로 작성해야 하는 것입니다.

그리고 전달인자가 없을 때에는 그냥 함수명만 {함수명} 이런식으로 호출하면 된다는 것도 기억하시면 좋겠습니다.