인프런 커뮤니티 질문&답변
작성한 질문수
영화목록 component 만들기 에서 질문이 있습니다.
해결된 질문
작성
·
67
0
영화목록 컴포넌트 만들기 영상에서
Movies 컴퍼넌트로 분리할때
좋아요 버튼 작동이 안되니까 handleLike 함수를
프롭스로 넘겨주는데요.
영상에서는 잘 되는데
동일하게 소스도 쳐보고 올려주신 github 소스도 가지고 와서 붙여넣어봐도 console창에서는 data 안의 likeCount 값이 버튼을 클릭하면 변경되는게 보이는데 실제로 화면에서는 변경이 되지 않습니다.
왜 그럴까요. 그리고 작동이 되는 게 영상에서도 보이는데, 저한테는 왜 안되는지도 궁금합니다. ;;;;
아래 .toUpperCase() 도 저는 왜 실행이 안될까요.;;
답변 3
1
1
let likeCount로 변수 선언하고 콘솔에서 값이 변경되고 있다면 화면에도 변경이 되어야 합니다.
html에서 {변수명} 잘 확인해 보시구요. 오타가 있으리라 봅니다.
실제로 작성하신 코드를 보여주셔야 확인이 가능할 듯 싶습니다~
네, 맞습니다.
이번에 vite와 svelte가 업데이트 되면서 관련 설치 룰이 전체적으로 업데이트 된 것으로 보입니다.
v5 부터 상태변수 문법이 변경되었습니다. vue나 리액트 비슷하게요 .
// let likeCount = 0; // 기존 문법
let likeCount = $state(0); // v5 문법개발자의 변은 기존 변수와 상태변수의 명확한 구분과 안정성을 위해서랍니다.
이전 문법이 심플해서 좋긴 한데 말이죠. ㅎㅎ
v4로 사용하시려면
깃허브 예제의 package.json에서 svelte 버전을 복붙해서 npm install 해주시면 됩니다. 아래 부분입니다.
// package.json
"devDependencies": {
...
"svelte": "^4.2.7",
...
},열공하시고 도움이 필요하시면 언제든 말씀해주세요~
0
안녕하세요, 인프런 AI 인턴입니다. chanyokr님.
Movies 컴포넌트에서 ‘좋아요’ 버튼이 클릭할 때 화면에 값이 실시간으로 업데이트되지 않는 문제에 대해 고민이 있으시군요. 이 문제는 보통 데이터 상태가 변경되었음에도 불구하고 UI가 변경되지 않는 경우로, 몇 가지 가능성을 고려해볼 수 있습니다.
1. Reactivity 문제
Svelte에서는 데이터 상태가 변화함에 따라 UI가 자동으로 업데이트되도록 반응성을 보장합니다. 만약 상태 변화에 따른 UI 업데이트가 반영되지 않는 경우, 상태 변경이 제대로 반영되고 있는지 확인해보세요.
- 상태가 제대로 변경되고 있는지: console에서 데이터가 변경되고 있는지 확인하셨다니, 이는 적절히 변화하고 있는 것 같습니다.
- 상태가 반응성을 가지고 있는지: Svelte에서는 반응성을 위해 반드시
let키워드로 변수를 선언해야 합니다. 반응형 업데이트가 필요하다면, 상태 변수는 반드시let을 이용하여 선언해주세요.
2. Props와 Refs 사용
- handleLike 함수가 제대로 전달되고 있는지: 부모 컴포넌트에서
handleLike함수를 자식 컴포넌트로 전달할 때는 이미 전달된 함수가 UI의 데이터 갱신에 영향을 주도록 설정되어야 합니다.
3. 표준 메소드 사용 문제
toUpperCase()문제: 이 부분은 데이터가 문자열이 아닌 경우 실행되지 않습니다. 데이터가 올바른 문자열인지 먼저 확인해보세요.
아래와 같은 게시글에서 비슷한 문제를 다룬 적이 있으니 이를 참고해 보시기 바랍니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
(왼쪽은 svelte4 버전으로 다시 넣어본거고, 오른쪽은 지금까지 안됐었던 소스입니다. 소스내용은 붙여넣기 한거라 모두 같은데, 스벨트 버전만 다릅니다.)
올려주신 github 소스를 보니까 package.json 파일에 svelte버전이 4버전으로 되어 있어서 혹시나 하고 확인해 보니 npm create vite@latest 로 제가 만들고 실습하던 폴더의 버전은 svelte5 로 되어 있더군요. 그래서 역시 혹시나 해서 스벨트 4버전으로 다시 폴더를 만들고 동일한 소스를 복사해서 붙여넣으니 정상 작동하는 것 같습니다.
왼쪽이 스벨트4 로 동작중인 페이지고 오른쪽이 스벨트 5로 동작중인데, 클릭을 해도 왼쪽은 클릭수가 올라가는데 스벨트5 는 클릭을 해도 0으로 표시됩니다.
handleLike 동작시 콘솔에 데이터를 찍어보도록 설정해서 클릭한 data가 콘솔창에 보이긴 하는데, 카운트가 안되는 것 같습니다.
혹시 정말 버전 문제 때문일까요?
(왼쪽은 svelte4 버전으로 다시 넣어본거고, 오른쪽은 지금까지 안됐었던 소스입니다. 소스내용은 붙여넣기 한거라 모두 같은데, 스벨트 버전만 다릅니다.)
올려주신 github 소스를 보니까 package.json 파일에 svelte버전이 4버전으로 되어 있어서 혹시나 하고 확인해 보니 npm create vite@latest 로 제가 만들고 실습하던 폴더의 버전은 svelte5 로 되어 있더군요. 그래서 역시 혹시나 해서 스벨트 4버전으로 다시 폴더를 만들고 동일한 소스를 복사해서 붙여넣으니 정상 작동하는 것 같습니다.
왼쪽이 스벨트4 로 동작중인 페이지고 오른쪽이 스벨트 5로 동작중인데, 클릭을 해도 왼쪽은 클릭수가 올라가는데 스벨트5 는 클릭을 해도 0으로 표시됩니다.
handleLike 동작시 콘솔에 데이터를 찍어보도록 설정해서 클릭한 data가 콘솔창에 보이긴 하는데, 카운트가 안되는 것 같습니다.
혹시 버전 문제 때문일까요?