Mong dev blog

1. props를 인자로 넘기면 반응성을 잃는다? vue에서는 컴포저블을 사용하여 비즈니스 로직을 분리할 수 있다. 또한, 컴포저블의 인자로 반응형 변수를 전달할 수도 있다. 그러나, 반응형 변수를 컴포저블 인자로 전달하면 반응성을 잃는 경우가 발생한다. 아래 코드는 사용자 데이터를 관리하는 useUser 컴포저블이다. 이 컴포저블은 id값을 인자로 받아서, id값이 변경될 때 어떤 처리를 한다. export function useUser(id) { watch(id, () => { // 어떤 처리 }); } computed나 ref, reactive로 선언된 변수를 컴포저블의 인자로 전달하면, 인자는 반응성을 유지한다. const userId = computed(() => ...) useUser(user..

0. 들어가기에 앞서… Vue와 React는 컴포넌트 기반으로 작동하며, 컴포넌트 간에 데이터를 전달할 때 props를 사용한다. props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는데, 자식 컴포넌트는 전달받은 데이터를 사용하여 뷰를 업데이트한다. 그러나 때로는 여러 개의 중간 컴포넌트를 거쳐야 하는 경우가 있다. 예를 들어, 부모 컴포넌트에서 데이터를 전달할 때 그 데이터를 사용하는 컴포넌트가 매우 깊은 계층에 위치해 있다면, 중간 컴포넌트를 거치는 과정이 필요한 것이다. 이 경우에는 중간 컴포넌트로 데이터를 전달하기 위해 props를 여러 계층을 거쳐 넘기는데 이를 Prop drilling이라고 한다. 이번 시간에는 Prop drilling 의 단점과 이를 예방할 수 있는 pr..