작성한 질문수 64

1

쉽게 생각하시면 선언된 state에 대한 감시 라고 보시면 됩니다. 

아래 페이지의 소스를 예로 들겠습니다. 

https://freeseamew.gitbook.io/svelte/

여기에서 실제로 선언된 state는 count 라는 state와 액션은 count += 1 로 count를 증가시키는 것이 전부입니다. 

하지만 실제로 count의 변화가 일어나면 다음과 같은 것들이 작동합니다. 

1. doubled 라는 count*2 와

2. count가 10을 넘기는 alert 발생

3. 그리고 count와 doubled 로구 출력 

만약 이것을 reactivity 없이 구현한다면 1,2,3번 모두 함수를 만들고, handleClick() 이 일어날 때마다 각각의 함수도 호출해야만 합니다.

하지만 svelte의 reactivity를 이용하면 처음에 선언만 해두면

각각의 기능들이 count를 바라보고 있다가 상황에 맞을 때 기능이 실행되는 것이겠죠.

물론 react, vue 등의 다른 프론트엔드에도 이와 같은 기능이 있습니다.

하지만 svelte는 이 기능을 아주 간단하게($: 하나로) 사용할 수 있는 장점이 있습니다.

1

라이프사이클을 접목하지 않은 이유가 따로 있다기 보다 기초 과정의 todo에서 라이프사이클을 적용할 만한 부분이 없어서 접목하지 않았다고 보시면 되겠습니다. 라이프사이클의 경우 꼭 이 기능을 중심으로 개발한다기 보다 해당 기능이 필요로 부분에 사용하면 됩니다. 예를 들어 지금의 todo는 회원가입기능이 없지만, 만약 현재의 todo 서비스를 확장해 회원가입 부분을 추가한다고 가정한다면,  특정 컴포넌트가 호출될 때 'onMount(async() => { 로그인체크함수호출  })' 이런식으로 라이프사이클을 사용할 수 있습니다. 

그리고 svelte의 경우 워낙 reactivity (반응성) 부분이 잘 구현되어 있어, 어떤 경우는 라이프사아클을 쓰지 않고 reactvity 함수를 이요해서 특정 state를 계속 감시하는 형태로 필요한 기능을 구현할 수 도 있습니다.

이부분 참고 하셨으면 좋겠습니다. 감사합니다.  

0

아!! 반응성이란게 참으로 쓸때가 많군요 ㅋㅋ 근데 어떤 특정한 상황에 $: 이걸 써야되는데 (이게 반응성 맞져?) 감이 잘 안잡혀요.. 제가 프론트엔드만 잘만하면 이직 할때 스킬업에 도움될건데요 힘드네요..