vue-router 변경 감지 (동적 라우팅의 문제점)

동적 라우팅의 문제점

동일한 레이아웃에 데이터만 달라지는 경우 동일한 component를 재사용하게 된다.

(하나의 component의 parmas를 구분해서 데이터 값을 변경해 주고 있다.)

 

그러나!

한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅은 한 번 더 호출하지 않기 때문에, component의 데이터 값이 바뀌지 않는다.

 

문제

게시판 1, 게시판 2

두 개의 게시판을 만드는데 동적 라우팅을 이용하고, 동일한 UI를 사용하기 때문에 공통 component를 사용한다.

메뉴를 이동해도 route만 변경되고 본문 내용은 바뀌지 않는다.

 

해결 과정

route 변경 시 onUpdated에서 데이터를 재호출 해보았다.

const boardType = route.params.boardType;

onUpdated(() => {
	boardType = route.params.boardType;
	getList();
})

맙소사.

boardType이 바뀌는 걸 감지해서 getList 함수를 호출한다.

getList 함수가 바뀌는 걸 감지해서 boardType의 값이 바뀐다.

다시, boardType이 바뀌는 걸 감지해서 getList 함수를 호출한다.

getList 함수가 바뀌는 걸 감지해서 boardType의 값이 바뀐다.

...

무한 루프에 빠져버렸다.

 

해결

나는 값이 변경되었을 때! 콜백을 실행시키고 싶다.

어떤 조건이 되었을 때, 특정 함수 실행을 위해 watch를 사용하면 된다.

 

Vue 인스턴스의 특정 프로퍼티가 변경될 때 지정한 콜백 함수가 실행된다.

변경된 값을 콜백 함수의 첫 번째 인자로 전달하고, 이전 값을 두 번째 인자로 전달하여 실행한다.

const targetBoardList = {
	boardType: route.params.boardType;
}

// 최초 1회 실행
onMounted(() => {
	getList();
})

// route 값이 변경되면 실행
watch(
	() => route.params.boardType,
	newBoardType => {
		targetBoardList.boardType = newBoardType;
		getList();
	}
)

route.params.boardType를 감시(watch)해서 route가 변경되면, 콜백을 1번 실행한다.