1. OOP 개념
- OOP란? 현실 세계 모델을 객체 단위로 추상화해 상태(속성)와 동작(메서드)을 갖는 프로그래밍 방식이다.
- OOP의 주요 특성
- 캡슐화: 데이터와 기능을 객체에 묶어 외부 접근 제한
- 상속: 기존 클래스를 확장해 코드 재사용
- 추상화: 중요한 특성만 뽑아내 표현
- 다형성: 같은 이름 메서드가 상황에 따라 다르게 동작
- 프론트엔드에서의 OOP 활용 예
- React 클래스 컴포넌트 설계
- UI 컴포넌트 단위 캡슐화와 로직 분리
- 상속과 다형성으로 구조화
2. 함수형 컴포넌트 기반 React에서 OOP는 어떻게 들어갈까?
- 캡슐화
컴포넌트가 props, state를 관리하며 자신만의 상태와 로직 감춤 - 합성(Composition)
OOP의 상속 대신 여러 컴포넌트 조합, 역할 분담을 통한 구조화 - 다형성
동일 인터페이스 컴포넌트가 props에 따라 다양하게 동작 - 책임 분리
UI와 비즈니스 로직 분리, 훅과 유틸 함수로 역할 나눔
함수형 컴포넌트는 함수형 프로그래밍 특성을 강조하지만, OOP의 캡슐화, 책임 분리, 재사용성 같은 핵심 원리는 여전히 React 설계에 반영되어 있다.
3. 실무 예시: usePagination 훅과 컴포넌트
usePagination훅: 페이지네이션 관련 상태와 기능을 캡슐화. 내부 상태를 관리하고, 상태 변경 로직을 포함.<Pagination />컴포넌트: UI 렌더링에 집중하며, 훅에서 전달받은 상태와 함수를 props로 받아 표현.
이 구조는
- 캡슐화: 훅과 컴포넌트가 각자의 책임과 상태를 메우고 있음
- 책임 분리: 로직과 UI가 분리돼 유지보수성과 가독성 향상
- 재사용성: 여러 페이지에서 동일 훅과 컴포넌트를 반복 사용 가능
즉, 함수형 컴포넌트와 훅을 활용한 React 구조 속에 OOP 원칙이 자연스럽게 녹아들어 있다.
4. 결론
- React가 함수형 컴포넌트 중심으로 진화했지만, OOP 개념은 UI 구조화, 상태 관리, 책임 분배 등에서 여전히 중요하다.
- OOP와 함수형 프로그래밍 패러다임을 상황에 맞게 조합해 효과적인 코드 설계와 유지보수를 한다고 이해하면 된다.
