[Svelte] 배열의 아이템의 정보 업데이트

연습 삼아 스벨트로  게시판을 만들고 있는데, 헤메다가 해결을 해서 나중을 위해 적어 놓는다.

 

항상 그렇지만 해결 방법은 크게 별거 없는거지만 찾는 과정이 어렵다.

 

스벨트에서는 $state를 사용하면  값이 변경 될 때 마다 다시 그려준다.

 

근데 문제는 배열인 경우가 항상 문제다.

 

특히나 객체로 된 배열들이다.

 

// board.ts
class Board {
	title =""
    content = ""
    readCount = 0
}

// +page.svelte
<script>
	let boards: Board[] = $state([]) // 대충 사용
    
    //...
    
    function updateReadCount(idx: number) {
    	let board = boards[idx]
        
        board.readCount = board.readCount + 1; // 이렇게 하면 업데이트가 발생 안함.
    	
        boards[idx] = board
    }

</script>

 

대충 만들었다만, 위의 코드를 보면  게시글을 클릭 했을 때,  조회수를 업데이트를 하는 부분이다.

 

주석으로도 되어 있지만, 저렇게 사용하면 오류가 발생함.

 

스벨트에서는 readCount 라는 프로퍼티만 변경을 하면 인식을 못하는거 같다.

 

그래서 해결 방법은 아래와 같음.

 

// board.ts
class Board {
	title =""
    content = ""
    readCount = 0
}

// +page.svelte
<script>
	let boards: Board[] = $state([]) // 대충 사용
    
    //...
    
    function updateReadCount(idx: number) {
    	let board = boards[idx]
        board.readCount = board.readCount + 1;
        
        let newBoard = new Board()		//신규 객체를 생성
        newBoard.title = board.title
        // 모든 프로퍼티를 복사.. 쓰기 귀찮아
        
        // boards[idx] = board; // 이렇게 하면 업데이트가 안됨.
    	
        boards[idx] = newBoard; // 업데이트 됨.
    }

</script>

 

대충 보면 알겠지만,  차이 점은 신규 객체를 만들어서 거기에 다 복사를 했다는 거임.

 

그걸 안하면 스벨트에서 인식을 안함. 

 

끗.