-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
[질문] tick에 대한 이해
20.11.07 11:51 작성 조회수 333
2
HEROPY님 좋은 강의 만들어주셔서 감사합니다. 최종 프로젝트 부분만 남아있는 시점에서 한가지 궁금한게 있어서 질문드립니다.
라이프사이클 함수중에 tick에 대해서 제가 정확히 이해하고 있는지 궁금합니다.
제가 이해한 tick 함수의 역할은 아래와 같습니다. (모호한 표현이 있을 수 있으니 이해해주세요.)
1. svelte 반응성은 할당을 통해서 일어납니다.
2. 할당에 의해 상태가 변경되면 DOM이 변경됩니다.
3. 그런데, 한 컴포넌트에서 동시 다발적으로 할당이 일어나는 경우 매번 DOM을 할당마다 변경해주기보다는 한꺼번에 처리해주는
게 성능상 더 효과적일겁니다. 그래서 마이크로 큐? 라는걸 도입해서 큐에 쌓아서 반응성을 차곡차곡 쌓고 한꺼번에 처리합니다.
4. 여기에서 tick 함수는 사용자가 마이크로 큐에 있는 값의 반응성을 명시적으로 일으킬수 있습니다. (스벨트가 자체적으로 몇 ms
마다 일으키는 반응성을 즉시 일으킬 수 있는 함수가 tick 함수입니다.)
저는 대략 이런 흐름으로 tick 함수를 이해했습니다. 제가 이해하는게 맞을까요?
늘 좋은 강의 감사드리며 앞으로 출시될 강의 기대하겠습니다 ^^!
답변을 작성해보세요.
2
2
HEROPY
지식공유자2020.11.07
hellofrontdev 님 안녕하세요.
벌써 최종 프로젝트 부분만 남으셨군요.
저의 강의를 관심 있게 꾸준히 잘 들어주셔서 정말 감사합니다.
이번에 라이프 사이클 tick에 대해 질문을 주셨는데요.
우선 '마이크로 큐'라는 단어는 '마이크로 타스크(Task)'로 정정하면 좋을 듯하고, 아실 수도 있겠는데 관련된 내용은 '자바스크립트 호출 스택(Call Stack)'을 찾아보시면 도움이 되지 않을까 합니다.
그리고 4번은 잘못 이해하신 듯해요~
적어주신 4번 내용처럼 tick 함수는 '명시적으로 반응성을 일으키는 것'이 아닙니다!
결론적으론 '반응성이 나타날 때까지 기다리는 것'입니다.
풀어보자면,
3번 과정이 언제 끝나는지 모르지만 아무튼 끝날 때까지 `await tick()` 부분에서 대기(pending)하고(기다리고),
과정이 끝나면 그 부분이 이행(fulfilled)돼서(promise 객체가 반환돼서) 처리가 가능합니다.
(대기, 이행 같은 단어는 비동기 파트에서 설명했어요~)
즉, 이행되었다는 것은 화면이 갱신되었다는 것(반응성)을 의미합니다.
그래서 화면이 갱신되고 나서 처리할 코드를 `await tick()` 다음에 작성하는 것이죠.
비동기 개념에서 await 키워드는 'promise 객체가 반환되길 기다린다'는 것을 의미하고,
실제 tick 함수는 화면의 갱신이 끝나면 promise 객체를 반환합니다.
비동기를 이해하는 가장 중요한 키워드는 '기다림'입니다.
서버 통신에서 비동기가 사용되는 이유가 서버의 로직 처리와 네트워크 환경에 따라 요청에 대한 응답이 언제 올지 모르니까 무작정 기다려야 하기 때문이죠.
꼭 서버 통신이 아니더라도 일단 기다려보고 뭔가가 끝나면 처리해야 하는 상황들이 있고,
대표적인 그 상황이 Svelte의 반응성처럼 화면이 언제 갱신(반응성)되냐는 것이죠.
로직을 어떻게 진행하고 언제 끝나며 언제 화면이 갱신될지는 모르지만, 아무튼 그 과정이 끝나면 '끝났다'는 약속(promise 객체)을 반환하니, 그것을 확인(`await tick()`)한 뒤 추가 로직을 작성하는 것입니다.
'tick 라이프 사이클에서 await를 사용하는 이유는 화면의 갱신을 기다려야 하기 때문이다'라고 정리하겠습니다.
4번에 대한 내용을 너무 주저리 풀어놔서 이해되실지 모르겠네요.ㅜㅠ
혹시 이해가 안 되시면 다시 질문 남겨주세요^^
1
답변 3