프론트에서의 객체 지향과 함수형 프로그래밍?? (1편)
이번에 면접을 보게 되면서 프론트에서 객체지향과 함수형 프로그래밍을 어떻게 활용할 수 있을지 구체적인 예시로 설명해주세요라는 질문을 받게 됐습니다.
평소 테스트 코드를 짜면서 단일 책임 원칙(SRP)이 중요하다는 것과 컴포넌트 설계를 하면서 개방 폐쇄 원칙(OCP)이 중요하다는 것은 느꼈는데
막상 프론트엔드에서 어떻게 객체 지향 프로그래밍과 함수형 프로그래밍을 잘 적용할 수 있을지 고민해본 적이 없어서 한번 고민 과정을 기록해보겠습니다.
당시 제가 질문을 듣고 떠올랐던 의문들은 다음과 같습니다.
-
리액트의 컴포넌트를 순수 함수로 볼 수 있을 것인가?
- 리액트의 컴포넌트 내부에서 외부 스토어를 구독하거나 서버 상태를 가질 수도 있는데, 순수 함수라 볼 수 있을까
-
그러면 컴포넌트 내에서 상태를 관리하지 않는 순수 view는 순수 함수인가?
-
리액트의 컴포넌트가 순수 함수라면 HOC도 함수형 프로그래밍인 것인가?
-
리액트 16버전 이전에 사용된 class형 컴포넌트 선언을 하면 객체 지향이라 할 수 있는가?
머릿 속이 복잡해지면서 해당 질문에 대한 답을 제대로 하지 못한 것 같아서 당시 떠오른 의문을 하나씩 없애보겠습니다.
리액트 컴포넌트를 순수 함수로 볼 수 있을까?
리액트 함수형 컴포넌트는 동일한 props이 오면 동일한 UI가 반환되니 순수 함수에 가깝습니다.
다만, 리액트 훅으로 외부 상태를 의존하게 되면 순수 함수가 아니게 됩니다.
상태를 관리하지 않는 View 컴포넌트는 순수 함수라고 볼 수 있을 것 같습니다.
HOC(고차 컴포넌트)는 함수형 프로그래밍인가?
HOC는 함수(컴포넌트)를 인자로 받고 반환한다는 점에서 함수형 프로그래밍이라 할 수 있습니다.
Class형 컴포넌트는 객체지향이라 할 수 있을까?
리액트 16 이전의 class 컴포넌트는 겉보기엔 OOP처럼 보이지만, 그냥 라이프사이클 메서드를 담기위한 문법이라고 봐야합니다.
일단 당시의 의문들이 좀 해소된 것 같습니다.
아직도 프론트엔드에서 어떻게 잘 활용할 수 있는지는 의문입니다.
그래서 가장 먼저 찾아본 자료는 토스의 모닥불 - 함수형 프로그래밍, 프론트엔드 개발에 진짜 도움될까?입니다.
영상의 내용을 요약하자면 아래와 같습니다.
- 객체지향은 구조 설계 / 모듈 분리 원칙과 같은 거시적 관점에서 활용하면 좋음
- 함수형 프로그래밍은 사이드 이팩트를 줄일 수 있고, 레이지 이벨류에이션을 적용하면 좋음
토스에서는 어떻게 객체지향과 함수형 프로그래밍을 적용하는지 감은 온 것 같습니다.
제 코드에 실제로 적용해보면서 객체지향과 함수형 프로그래밍의 장점을 느껴보고 싶습니다.
맺음말
원래는 이번 편에 프론트엔드에서 객체지향과 함수형 프로그래밍을 어떻게 잘 적용할 수 있을지와 실제 적용을 다룰려고 했는데
프로젝트 최종 발표(이따 7시간 뒤 발표...)와 겹치게 되면서, 아쉽게도 면접 당시의 의문을 정리하는 정도로 끝났습니다
이번 연휴가 굉장히 기니 이때 확실하게 정리해보려고 합니다.
