Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
질문이요
Đã giải quyết
Viết
·
197
0
투두리스트를 완주 했는데요 보다보니 생각난게 있는데요 라이프사이클로 접목하지 않는 이유라도 있나요? 전에 뷰나 리액트 강의를 약간 본적이 있는데요 리액트에 경우는 그걸 토대로 제작 하는걸 봐서요
Câu trả lời 3
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
아!! 반응성이란게 참으로 쓸때가 많군요 ㅋㅋ 근데 어떤 특정한 상황에 $: 이걸 써야되는데 (이게 반응성 맞져?) 감이 잘 안잡혀요.. 제가 프론트엔드만 잘만하면 이직 할때 스킬업에 도움될건데요 힘드네요..