내가 React 개발자인지, Vue 개발자인지 온통 혼란스러운 요즘.

Vue는 Redux를 닮은 Vuex를 제외하면 적당한 대체재가 없는 것 같다.

최근 Composition api가 나오면서 Pinia와 같은 실험이 이어지고 있다고는 하는데... React에 비해선 영 반찬이 많지 않다.

덕분에 익숙하지 않은 형태로 상태를 관리하느라 머리가 지끈지끈거리는데, 그 와중에 느낀 점에 대해 기록하고자 한다.

너 좀 상태 이상해

상태를 크게 분류하면 전역, 지역 상태로 나눌 수 있고 잘개 쪼갠다면 이름, 전화번호, 생년월일과 같은 하나의 값이라고 할 수 있다. 심지어는 URL조차도 변하기 때문에 나는 상태라고 지칭하곤 한다.

const [name, setName] = useState('')
const [phone, setPhone] = useState('')
const [birth, setBirth] = useState('')
 // React
 
const name = ref('')
const phone = ref('')
const birth = ref('')
 // Vue

이렇게 괴상망측하게 짤 수도 있고... 너 좀 상태 이상하다?

const [pInfo, setPInfo] = useState({
	name:'',
    phone:'',
    birth:'',
})
 // React
const pInfo = ref({
	name:'',
    phone:'',
    birth:'',
})
 // Vue

나는 개인적으로 위와 같이 Object로 관리하곤 한다.

이것들은 지역 상태에 국한된 것이고, React에서는 Redux, context, recoil, zustand, zotai... 와 같은 것들이 있으며 Vue에는 Vuex가 있다.

다만 Vuex가 Redux를 닮았다보니, 솔직히 말하면 쓰기가 꺼려졌다. 무엇보다 글로벌에만 등록된다는 점이 사용을 어렵게 하는 것 같다.

전역 상태 관리를 멀리하면서..

최근에 작성한 초기진입페이지는 정말 많은 것들이 얽히고 설켜있다.

상태 자체는 관리할 것이 많진 않지만, 그것을 가져오고 또 업데이트하는 핸들러 함수들까지 props로 주고받고 하고 있다보니 한 개의 자식 컴포넌트에 내려가는 것만 최소 4개씩은 꼭 있다.

스스로 느끼기에, 내가 짰는데도 불구하고 이거 나중에 받아다가 유지보수할 사람은 정말 힘들겠구나..란 생각이 들었다. 심지어 가끔 컴포넌트 흐름을 헷갈릴 때가 있다. 직접 코딩한 사람이 그렇다는데.. 다른 사람은 과연 어떨까 싶다.

그래서 전역 스토어에 그냥 값이든 핸들러든, 다 올려버릴까?! 란 생각을 한 열번은 했다.

전역에다가 선언 좀 하지 마라!!!

학교에서 배울 때나, 지금이나. 전역에 선언하는 것은 최대한 지양하고 엄격하게 관리하라는 것을 항상 가슴에 품고 산다.

왜 그렇게도 전역 변수를 쓰지 말라고 했는지 떠올려보자.

변수명이 겹칠 수 있고...
엉뚱한 컴포넌트가 해당 변수를 참조해서 사이드 이펙트를 일으키기도 하고..

보편적으로는 위의 생각이 떠오르는데, 더 나아가 가비지 컬렉터를 생각해보면.

가비지 컬렉터는
'더 이상 객체에 닿을 수 없을 때'
'값을 다른 값으로 재선언할 때'
할당된 메모리를 삭제할 수 있다.

그런데..? 전역에 우리가 선언한 것은 보통 재선언될 필요가 없다고 판단한 값을 선언하거나, 로그인 토큰 같은 것을 담아두곤 한다.

다시 선언될 필요가 없으니까 전역에다가 선언하자고~

반대로 생각해보면, 값이 바뀔 일이 없기 때문에 App이 구동되고 있는 동안 그 메모리는 계속 남아있게 된다는 뜻이 아닌가?

아무튼, 그래서 요약하면. 무지성으로 전역에다가 선언하지 말라는 것의 의미를 개미 발가락만큼 더 이해하게 된 것 같다. 그리고 앞으로 지역적으로 상태를 이쁘게 제어하는 것에 대해 고민하다보면 개발 실력이 많이 올라갈 것 같다.