UI는 이따가 생각하자
Last updated
Was this helpful?
Last updated
Was this helpful?
상태와 데이터는 나중에 신경쓸일.
앱을 사용하면서 어떤 과정을 거치는지, 어떤 정보를 필요로 하는지, 어떤 정보를 서버로 전송할지 즉, 도메인을 모델링하는 작업부터 시작하자.
이런 문제를 해결하는데는 UI 라이브러리 없이도 해결 가능하다. 비즈니스 로직을 수행하는데 필요한 동작을 추상적인 형태로 만들 수 있다. 그리고 단위 테스트를 하자.
[트윗 번역] 애플리케이션의 (비지니스)로직을 다양한 UI에서 사용될 수 있도록 설계하고 개발하세요. 그럴 일이 없다 하더라도요. 이렇게 하면 (비지니스)로직이 표현 계층과 결합되는 것을 피하도록 강제합니다. 보통 메인스트림 프레임워크(리액트, 앵귤러, 뷰 등)가 의도했는진 모르겠으나 로직과 표현 계층의 분리를 유도하고 있죠.
이렇게 하는 이유는 UI 없이 단위 테스트를 진행할 수 있다. 이 때 테스트는 마운팅, 렌더링, 이벤트 호출, UI 스냅샷 등 별도의 부가 설정이 필요 없다. 왜냐면 비즈니스 도메인과 상관이 없고 오히려 로직이 불필요하게 리액트와 묶인다.
비즈니스 프로세스를 함수 형태로 직접 호출하는 것만큼 단순한 건 없다. 특히 리듀서는 순수함수이기 때문에 단위테스트하기 너무 좋다. 편리하다.
도메인 상태를 리액트 컴포넌트 상태로 넣으면, 비즈니스 프로세스와 UI가 결합되어 불필요하게 앱이 복잡해진다.
정리하자면,
데이터를 다루는 로직과 UI를 분리해야한다.
동시성을 지원하는 것은 UI 상태같이 휘발성 상태에서 관리하는 것이 더 맞습니다. 하지만 비지니스 로직은 어떨까요? 비지니스 로직은 언제나 한 곳에서 관리되어야 합니다.
리액트는 휘발성 UI 상태를 관리하고, 비지니스 로직을 관리해서는 안된다. 따라서 본질적으로 변한 것은 없습니다.
마지막으로 덧붙이자면 이 글을 통해 MobX와 mobx-state-tree에 근본 목표를 더욱 잘 이해하셨으리라 생각합니다. 이 라이브러리들은 아래와 같은 목표를 가지고 설계되었습니다.
어떤 UI 추상화 기법과 관계없이 상태를 관리할 수 있도록 한다.
깔끔하고 투명하게 상태를 UI와 연결할 수 있게 한다.
에러가 발생하기 쉬운 구독 관리(역주: pub-sub 패턴의 구독 이야기로 보입니다. 지난 포스트를 참고하세요), 셀렉터(역주: 메모이제이션 등. reselect 참고), 그 외의 직접 해야하는 최적화를 최대한 피하고 이벤트 발생 시 컴포넌트가 불필요하게 리랜더(re-render)되지 않도록 한다.
이 글을 작성하게 된 계기는 이 글을 보고 나는 어떻게 개발하고 있지? 그리고 누군가에게 설명 가능한가? 이다.
이렇게 작성된 코드들은 단위테스트를 거친다. 그 이후에, UI 레이어 작업을 시작한다.
이렇게 하는 이유는 결국 UI는 도메인 레이어의 데이터들을 표현해주는 수단이다. (물론 UI 내부적으로 유지되는 휘발성 상태들이 있다.) 먼저 도메인 레이어(리듀서, 셀렉터)의 단위 테스트를 통해 검증된 데이터를 UI레이어에 넘겨주기만 함녀된다. 이렇게 했을 경우, 표현 계층 (UI 레이어)과 비즈니스 로직을 분리하여 각각 한곳에서 관리할 수 있다.
Q. 이 글을 읽고.. A. 이 글에서는 상태관리를 먼저 하고 그 다음에 앱이 동작하게 하는 것을 강조한다. 즉, 비즈니스 로직을 수행하는데 필요한 작업을 먼저 처리한다.
비즈니스 로직은 UI 없이 단위 테스트 진행 가능 (마운팅, 이벤트 트리거 필요 없음)
깔끔하고 투명하게 상태를 UI와 연결한다.
함수 형태로 직접 호출하는 것만큼 단순한게 없다.
이렇게 하면, 표현 계층과 로직을 분리할 수 있다.
반대로, 결합하여 작업하게 되면
즉, 만약 비즈니스 로직이 UI 컴포넌트에 들어가면..
비즈니스 프로세스와 UI가 결합되어 불필요하게 앱이 복잡해진다.
단위 테스트 어렵다.
Q. 나는 어떻게 개발하고 있지? A. 에 나온 Layer별로 구분지어 설명하자면,, API가 있다면 서비스 레이어를 구축하여 도메인 레이어에서 해당 데이터를 스토어에 저장 (혹은 정제 후 저장)을 한다. 그리고 필요한 데이터에 대해 셀렉터 함수를 만든다. UI 레이어에서 필요에 맞게 연산을 할 수도 있고 단순히 상태 트리 조각을 전달할 수 있다.