[React] 비지니스로직과 뷰
비지니스로직
프론트엔드 비지니스 로직은 프론트엔드 개발자가 구현하는 애플리케이션의 핵심 비즈니스 로직입니다. 이것은 애플리케이션의 사용자 인터페이스와 관련된 로직을 포함합니다. 프론트엔드 비즈니스 로직은 일반적으로 사용자 입력을 처리하고 유효성 검사를 수행하며 데이터를 검색하고 저장하는 등의 작업을 수행합니다. 예를 들어, 사용자가 폼을 작성하고 제출하면 프론트엔드 비즈니스 로직은 해당 폼의 데이터를 검증하고 서버에 전송하는 등의 작업을 수행합니다.
뷰
반면에 뷰는 프론트엔드에서 사용자에게 보여지는 UI를 구성하는 요소입니다. 뷰는 일반적으로 HTML, CSS, JavaScript와 같은 프론트엔드 기술을 사용하여 개발됩니다. 뷰는 사용자가 인터랙션 할 수 있는 요소를 포함하여 애플리케이션의 모든 UI를 나타냅니다. 예를 들어, 버튼, 폼, 테이블 등이 뷰의 예시입니다. 뷰는 일반적으로 프론트엔드 비즈니스 로직과 함께 작동하여 사용자 입력 및 상호작용을 처리하고 UI를 업데이트하며, 최종적으로 사용자에게 애플리케이션의 결과를 제공합니다.
비지니스로직과 뷰를 구분하는 이유
#코드의 가독성과 유지보수성을 높일 수 있습니다.
뷰 요소와 비즈니스 로직이 함께 섞여 있으면 코드가 복잡해지고 유지보수가 어려워집니다. 그러나 뷰 요소와 비즈니스 로직을 각각 분리해두면 코드를 더욱 쉽게 이해하고 수정할 수 있습니다.
#재사용성을 높일 수 있습니다.
뷰 요소와 비즈니스 로직이 분리되어 있다면, 뷰 요소를 재사용하거나, 비즈니스 로직을 다른 뷰 요소와 조합하여 재사용할 수 있습니다. 이는 코드의 중복을 줄이고, 개발 시간을 단축할 수 있는 장점을 가져옵니다.
#개발의 분업화가 가능합니다.
뷰 요소와 비즈니스 로직이 분리되어 있다면, 프론트엔드 개발자와 백엔드 개발자가 동시에 작업할 수 있습니다. 또한, 디자이너와 협업 시 디자인을 기반으로 뷰 요소를 만들고, 프로그래머가 그에 맞는 비즈니스 로직을 구현하는 식으로 개발을 할 수 있습니다.
리액트 코드 예시
다음은 로그인 폼 컴포넌트를 구현하는 코드입니다.
이 코드에서 LoginForm 컴포넌트는 사용자의 로그인 정보를 입력받아,
handleSubmit 함수를 호출하여 서버에 전송하는 비즈니스 로직을 구현합니다.
LoginForm 컴포넌트에서는 뷰 요소인 입력 필드와 로그인 버튼 등도 함께 구현합니다.
이러한 뷰 요소들은 해당 컴포넌트 내에서만 사용되는 것이 일반적입니다.
그러나 이러한 뷰 요소들은 다른 컴포넌트에서도 재사용 가능하기 때문에,
LoginForm 컴포넌트 내에서 뷰 요소를 추출하여 따로 구성하는 경우가 많습니다.
예를 들어, 다음과 같이 TextInput 컴포넌트를 따로 만들어서 사용할 수 있습니다.
이렇게 구성된 TextInput 컴포넌트는 다른 컴포넌트에서도 쉽게 재사용할 수 있습니다.
다음은 LoginForm 컴포넌트에서 TextInput 컴포넌트를 사용하는 예시 코드입니다.
이렇게 컴포넌트 내부에서 사용되는 뷰 요소들을 추출하여 따로 구성하는 것은 컴포넌트를 더욱 재사용성 높은 구조로 만들어줍니다. 이렇게 구성된 컴포넌트는 필요한 뷰 요소들을 동적으로 추가하거나 수정하는 등 더욱 유연하게 사용할 수 있습니다.
또한, 이렇게 컴포넌트의 비즈니스 로직과 뷰 요소를 분리함으로써 코드의 가독성과 유지보수성도 높아집니다. 비즈니스 로직이 다른 컴포넌트와 섞이지 않고, 뷰 요소들도 따로 추상화되어 관리되기 때문입니다. 리액트에서는 이러한 컴포넌트의 분리를 위해 함수형 컴포넌트와 클래스형 컴포넌트를 모두 지원합니다. 함수형 컴포넌트는 간단한 UI를 만들 때, 클래스형 컴포넌트는 상태와 라이프사이클 관리 등에 더 유리합니다.
함수형 컴포넌트에서는 일반적으로 상태나 라이프사이클 메서드를 사용할 필요가 없기 때문에, 뷰 요소와 비즈니스 로직을 각각 따로 작성하기가 더욱 간편합니다. 클래스형 컴포넌트에서는 상태나 라이프사이클 메서드를 구현할 때 따로 뷰 요소를 구성하는 메서드를 만들어줄 수도 있습니다. 이렇게 하면 컴포넌트의 비즈니스 로직과 뷰 요소를 각각 구분할 수 있습니다.