Post

프론트엔드 개발자는 항상 상태 관리에 대해 고민한다. 여느 고민이 그렇듯 상태 관리에도 은탄은 없다. 그럼에도 무엇이 더 나은 방향일지, 무엇을 고민해보면 좋을지 그 기준을 살펴보자.

1. 닥치는대로 전역 상태 관리는 X

어쨌거나 저쨌거나 리액트의 기본 상태 관리는 useState다. 그 정도가 심하지 않다면 props drilling도 할 수 있다. 더불어 props drilling을 해결하기 위한 방법이 전역 상태 관리를 이용하는 것만 있는 것도 아니다. 이를테면 합성 컴포넌트를 적절히 사용하는 게 대안이 될 수 있다. (심지어 재사용성도 도모할 수 있다.)

2. 서버 측 데이터를 전역 상태화할 땐 일련의 규칙을 따르자.

서버에서 받아오는 데이터를 상태로 관리하고 있다면 최신화 보장을 고려해야 한다. 캐싱 및 동기화에 대한 규칙이 없다면 전역 상태의 최신화가 되었는지 의심될 수 밖에 없다. SWR, React Query 등을 활용하여 더 나은 서버 데이터 상태 관리 전략을 수립하자.

3. 상태는 최대한 연관 컴포넌트 곁에 두자.

이를 State Colocation(공존)이라 한다. reference 하나의 컴포넌트가 많은 상태를 갖고 있다고 해서 이를 전역 상태화하는 것보단, 즉 어떤 컴포넌트가 너무 많은 상태를 갖고 있다면, 해당 컴포넌트가 너무 많은 일을 하는 것은 아닌지 의심해보아야 한다. 클린 코드의 대전제중 하나인 '하나의 함수는 하나의 기능만을'과 같은 결의 규칙이라고도 볼 수 있다.