객체지향 프로그래밍(OOP)은 객체(Object)라는 단위로 프로그램을 설계하는 프로그래밍 패러다임입니다. 리액트(React)는 UI 라이브러리로, 객체지향 프로그래밍의 원칙들을 사용할 수 있지만, 리액트 자체는 객체지향을 전제로 한 라이브러리는 아닙니다. 리액트는 컴포넌트 기반 아키텍처를 사용하고, 함수형 프로그래밍(FP)의 개념을 더 많이 따르는 편입니다. 그럼에도 불구하고, 리액트에서 객체지향 프로그래밍의 일부 개념을 적용할 수 있습니다.
1. 객체지향 프로그래밍(OOP)의 주요 개념
객체지향 프로그래밍은 주로 다음과 같은 네 가지 핵심 개념에 중점을 둡니다.
- 클래스 (Class): 객체를 생성하기 위한 설계도. 클래스는 객체의 속성 (Attributes)과 행동 (Methods)을 정의합니다.
- 객체 (Object): 클래스의 인스턴스이며, 상태(속성)와 메서드(행동)를 가집니다.
- 상속 (Inheritance): 기존 클래스를 기반으로 새로운 클래스를 생성하여 재사용성을 높이는 개념입니다. 자식 클래스는 부모 클래스의 속성과 메서드를 상속받습니다.
- 다형성 (Polymorphism): 동일한 메서드 이름이 다른 클래스에서 다른 동작을 하도록 하는 개념입니다. 즉, 하나의 인터페이스가 여러 형태로 구현됩니다.
- 캡슐화 (Encapsulation): 객체의 내부 구현을 숨기고, 외부에서 특정 인터페이스를 통해 객체와 상호작용하도록 제한하는 개념입니다.
2. 리액트와 객체지향 프로그래밍의 관계
리액트는 컴포넌트 기반의 UI 라이브러리입니다. UI는 여러 개의 컴포넌트들로 구성되며, 각 컴포넌트는 독립적인 상태와 로직을 가질 수 있습니다. 이 점에서 리액트는 객체지향 프로그래밍의 캡슐화 개념과 유사한 부분이 있습니다. 리액트에서는 컴포넌트가 상태를 캡슐화하고, 그 상태를 바탕으로 UI를 렌더링합니다.
3. 리액트에서 객체지향 프로그래밍 개념 사용하기
리액트에서 객체지향 개념을 활용할 수 있는 부분은 주로 클래스형 컴포넌트를 사용할 때입니다. 하지만 리액트는 최신에는 함수형 컴포넌트가 더 널리 사용됩니다.
클래스형 컴포넌트에서 객체지향 개념
리액트의 초기에는 클래스형 컴포넌트를 사용하여 UI를 구성했으며, 이때 객체지향 프로그래밍의 원칙을 다음과 같이 적용할 수 있었습니다:
- 클래스 (Class): 클래스형 컴포넌트는 클래스로 정의됩니다. 리액트 컴포넌트는 React.Component를 상속받고, 이 클래스에서 상태(state)와 메서드를 관리합니다.
여기서 MyComponent는 React.Component 클래스를 상속받아 상태와 메서드를 가집니다.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
-
상속 (Inheritance): MyComponent는 React.Component를 상속받아 리액트의 기본적인 컴포넌트 기능을 갖습니다. 또한, 사용자 정의 클래스를 만들어 기능을 확장하거나 수정할 수 있습니다.
-
캡슐화 (Encapsulation): state와 setState는 클래스 내부에서 관리되며, 컴포넌트 외부에서 직접 접근할 수 없습니다. 외부에서는 render 메서드를 통해 UI만 갱신할 수 있습니다.
-
다형성 (Polymorphism): 컴포넌트는 상속을 통해 다른 동작을 구현할 수 있습니다. 예를 들어, 기본 컴포넌트를 상속하여 다른 방식으로 동작하는 컴포넌트를 만들 수 있습니다.
함수형 컴포넌트와 객체지향 개념
현재 리액트에서는 함수형 컴포넌트가 더 많이 사용되고 있으며, 함수형 컴포넌트는 객체지향 프로그래밍의 개념을 그대로 따르지는 않지만, 상태 관리와 로직 분리라는 측면에서 함수형 프로그래밍에 더 가까운 방식입니다. 함수형 컴포넌트에서는 Hooks를 사용하여 상태를 관리하고, 라이프사이클을 다루며, 더 직관적이고 간결한 코드 작성을 가능하게 합니다.
4. 함수형 컴포넌트와 객체지향 프로그래밍의 차이점
리액트에서 함수형 컴포넌트와 클래스형 컴포넌트의 가장 큰 차이는 this 사용 여부와 상태 관리 방식입니다.
1. 클래스형 컴포넌트:
- 상태 관리: this.state와 this.setState로 상태를 관리합니다.
- this 바인딩: 메서드를 사용하려면 this를 바인딩해야 합니다.
- OOP 개념(상속, 다형성)을 더 쉽게 적용할 수 있습니다.
2. 함수형 컴포넌트:
- 상태 관리: useState, useEffect와 같은 Hooks로 상태를 관리합니다.
- this가 없어서 코드가 더 간결하고, 바인딩 문제도 없습니다.
- 객체지향 개념을 완전히 따르지는 않지만, 컴포넌트 기반 설계와 상태 관리는 객체지향에서 영향을 받은 설계입니다.
| 구분 | 클래스형 컴포넌트 | 함수형 컴포넌트 |
|---|---|---|
| 상태 관리 | this.state와 this.setState 사용 | useState 등 Hook을 통해 상태 관리 |
| 메서드 | 클래스 메서드로 정의하고 this로 접근 | 함수 내부의 함수로 정의 |
| 바인딩 문제 | this 바인딩 필요 (constructor에서) | 바인딩 문제 없음 |
| 코드 간결성 | 상대적으로 복잡함 | 더 간결하고 직관적 |
| 사이클 관리 | componentDidMount, componentDidUpdate 등 라이프사이클 메서드 사용 | useEffect 등 Hook으로 관리 |
5. 리액트에서 객체지향과 함수형 프로그래밍의 혼합
리액트는 컴포넌트 기반 아키텍처를 사용하므로, 객체지향의 캡슐화와 함수형 프로그래밍의 선언적 UI를 혼합하여 사용합니다. 리액트의 설계 자체는 함수형 프로그래밍에 더 가까운 접근을 취하고 있지만, 클래스형 컴포넌트에서 객체지향 개념을 적용할 수 있습니다.
💙 결론
- 리액트는 객체지향 프로그래밍(OOP)의 개념을 활용할 수 있지만, 객체지향 프로그래밍을 위한 라이브러리는 아닙니다.
- 리액트에서는 컴포넌트 기반 설계를 통해 객체지향의 캡슐화 개념을 쉽게 적용할 수 있으며, 함수형 프로그래밍(FP)의 장점을 적극적으로 활용하고 있습니다.
- 클래스형 컴포넌트는 상속과 다형성을 활용할 수 있지만, 현재는 함수형 컴포넌트와 Hooks가 더 많이 사용됩니다.
리액트는 객체지향 프로그래밍의 개념을 일부 차용하면서도 함수형 프로그래밍의 이점을 살려 UI를 선언적으로 구성하는 데 중점을 두고 있습니다.
