wiki 최근 프론트엔드 코드에서 상태 전이(state transition) 를 활용한 로직을 보았다. 백엔드에서는 상태 전이를 자주 사용해왔지만, 프론트에서도 충분히 적용할 수 있다는 점이 새삼스럽게 느껴졌다.
Next.js로 개발하면서 코드가 점점 지저분해지는 느낌을 받고 있었는데, 왜 상태 전이 로직을 떠올리지 못했을까 하는 생각이 들었다.
상태 전이 로직을 사용하면 코드가 깔끔해지는 이유는 무엇일까? 우리가 어떤 개념을 설명할 때, 말하는 사람과 듣는 사람 사이에 공통된 그림이 있어야 한다. 중심이 되는 굵직한 공통 노드가 있고, 거기서 가지가 뻗어나가듯 구조가 그려지면 서로의 이해가 쉽게 맞춰진다.
코딩이나 설명도 마찬가지다. 여러 개념에서 공통적으로 추상화할 수 있는 내용을 뽑아 중심에 두고, 그 위에서 흐름을 이어 나가면 구조가 명확해진다.
상태 전이 로직이 좋은 이유도 이와 같다. 비즈니스 로직에서는:
- 특정 상태에 들어가기 전에 해야 할 일들
- 상태가 되었을 때 실행해야 할 일들
- 다음 상태로 넘어가며 처리해야 할 일들
이처럼 단계별로 공통된 패턴이 존재한다. 상태 전이를 사용하면 이런 개념을 여러 인스턴스나 상황에서 뽑아 코드로 정리할 수 있고, 보는 사람의 머릿속에도 동일한 구조가 심겨진다.
사실 이런 구조화된 사고의 장점은 상태 전이에만 해당되는 것은 아니다. 전략 패턴, 파이프라인, 템플릿 메서드처럼 공통된 추상화 틀을 갖는 패턴들은 모두 코드의 의미를 하나의 ‘중심 노드’로 모아 이해하기 쉽게 만든다. 상태 전이는 그중 하나의 좋은 적용 사례일 뿐이다.
적고 보니 당연한 이야기같다.