inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Svelte 입문 강의 - A부터 Z까지

beforeUpdate와 afterUpdate

생명주기 중 afterUpdate가 동작하지 않는 이유를 모르겠습니다

464

초보

작성한 질문수 3

2

안녕하세요
생명주기 파트 수업을 듣던 중에 궁금한 것이 생겨서 질문드립니다 ^^;
<script>
  import { beforeUpdateafterUpdate } from 'svelte';
  let num = 0;
  let p;

  function handleClick() {
    num += 1;
  }

  beforeUpdate(() => {
    console.log('beforeUpdate'p);
  })
  afterUpdate(() => {
    console.log('afterUpdate'p);
  })
</script>

<button on:click={handleClick}>Add</button>
<p bind:this={p}>{num}</p>

위 코드를 실행하면 아래처럼 결과가 나옵니다.

첫번째의 beforeUpdate, 두번째의 afterUpdate는 페이지 로딩 전 후 일 것이고

세번째 beforeUpdate 로그는

코드의 마지막줄인 

<p bind:this={p}>{num}</p>

에 의해서 DOM이 다시 수정되어 나온 결과라고 생각합니다

그런데 afterUpdate 로그는 왜 나오질 않는지 궁금합니다

코드를 바꿔가며 테스트해봐도 afterUpdate는 계속 동작이 되질 않습니다

svelte

답변 2

2

이효범(Beomy)

안녕하세요. :)

질문 주신 내용과 동일한 이슈가 https://github.com/sveltejs/svelte/issues/3290 에 버그로 리포팅 되어 있었습니다. :(

수정된 것으로 이슈가 닫혀 있지만 재현되는 것으로 보아 해당 이슈가 완전히 해결되지 않은 것 같습니다.

문의 남겨 놓고, Svelte의 답변을 기다리는 중입니다. 답변이 오면 다시 답글을 드리도록 하겠습니다.

1

초보

아 알겠습니다~ 감사합니다!

프로젝트 실행이 되지 않아 menu API 테스트가 불가합니다 ㅠ

0

134

9

프론트 api.js의 요청 headers 옵션의 cors 관련 설정 질문

0

61

2

모듈 버전이 안맞아서 발생하는 문제 같습니다;;;

0

188

2

meteor 버전 때문에 실행이 안됩니다.

0

160

2

graghQL의 transaction 처리속도가 궁금합니다.

0

112

2

질문있습니다.

0

106

2

화면 구성 설명용 도구 이름

0

158

1

Meteor 실행 오류 문의 드립니다.

0

184

1

영호 좋아요 버튼이 콘솔에는 잘 찍히지만 화면에 렌더링 되지 않습니다.

0

129

2

영화목록 component 만들기 에서 질문이 있습니다.

0

209

3

"hello".toUpperCase() 가 안되는데요.

0

148

1

컴포넌트 이벤트

1

314

1

CDN이 뭔가요?

1

1662

1

혹시 다음 강의는 언제쯤??

1

333

2

강좌 범위는 아니지만요...

2

401

2

undefined 없애기

1

388

3

이벤트 수식어 중에서 passive 설명이 잘 이해가 되질 않습니다

1

1156

3

질문드립니다 !

1

250

1

이 부분은 좀 어려운거 같아여

1

302

4

import Child 대소문자 차이

1

463

1

npm run dev not working

1

514

3

임포트하는 이유에 대해..

1

274

3

오류가 나요

0

303

1

프레임워크

0

217

1