import React, { Component } from "react";
class CustomInput extends Component {
render (){
return(
<div>
<input type= 'text' placeholder=""/>
</div>
)
}
}
export default CustomInputconst CustomInput = () => {
return (
<input type= 'text' placeholder=""/>
)
}
export default CustomInput상단 코드는 클래스형 컴포넌트, 하단은 함수형 컴포넌트라 칭한다. 가끔 라이브러리 내부 코드를 보면 클래스형 컴포넌트로 많이 작성되어 있는걸 볼 수 있다. 함수형 컴포넌트를 주로 사용하지만 프로젝트의 성격과 필요에 따라 클래스형 컴포넌트를 알아둘 필요가 있을 것이다.
클래스형 컴포넌트 (Class Components)
클래스형 컴포넌트는 리액트의 초기 버전부터 사용되어 온 전통적인 방식으로, 상태 관리와 생명주기 메서드를 사용하여 컴포넌트를 관리한다. 클래스형 컴포넌트는 생명주기 메서드를 통해 컴포넌트의 생성부터 소멸까지의 과정을 더 세밀하게 제어할 수 있다. 이는 복잡한 상태 관리가 필요한 대규모 애플리케이션에서 유용할 수 있다.
필요조건
- React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 한다.
- React.Component의 하위 class에서 반드시 정의해야 하는 메서드 render() 선언
클래스형 컴포넌트에서는 state와 props를 이용하여 상태를 관리한다. state는 컴포넌트 내부에서 관리되는 상태이며, setState() 메소드를 이용하여 업데이트할 수 있다.
특징
1. 객체 지향적 접근
- React.Component를 상속받아 구현
- this 키워드를 통한 상태와 메서드 접근
- 생명주기 메서드 사용 가능
2. 상태 관리
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
}
3. 생명주기 메서드
- componentDidMount
- componentDidUpdate
- componentWillUnmount
- shouldComponentUpdate 등을 직접 사용 가능
장점
1. 명확한 생명주기 관리
- 각 단계별 메서드가 명확히 구분됨
- 복잡한 컴포넌트 로직을 체계적으로 관리 가능
2. 객체 지향 프로그래밍의 이점
- 상속을 통한 코드 재사용
- 캡슐화를 통한 관련 로직 그룹화
3. this를 통한 일관된 접근
- 상태와 메서드에 대한 접근이 일관됨
단점
1. 복잡한 문법
- 생성자, this 바인딩 등 보일러플레이트 코드가 많음
- JavaScript 클래스 개념에 대한 이해 필요
2. 코드 재사용의 한계
- HOC나 render props 패턴을 사용해야 함
- 로직 재사용이 함수형에 비해 복잡
함수형 컴포넌트 (Functional Components)
함수형 컴포넌트는 리액트 훅을 사용하여 상태 관리와 생명주기 기능을 구현할 수 있게 되면서, 보다 간결하고 직관적인 코드 작성이 가능해졌기 때문이다. 함수형 컴포넌트는 훅을 통해 라이프사이클을 효율적으로 관리할 수 있으며, 상태와 관련된 로직을 캡슐화하여 여러 컴포넌트에서 재사용할 수 있게 해주는 커스텀 훅을 만들 수 있기 때문에 코드의 재사용성과 테스트 용이성을 높일 수 있다.
특징
1. 간단한 함수 선언
function MyComponent(props) {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}2. Hooks를 통한 상태 관리
- useState
- useEffect
- useContext 등의 Hook 사용
3. 선언적 프로그래밍 방식
- 순수 함수처럼 동작
- props를 받아서 UI를 반환하는 단순한 형태
장점
1. 간결한 코드
- 보일러플레이트 코드 최소화
- 이해하기 쉬운 구조
2. 재사용성 향상
- Custom Hooks를 통한 로직 재사용 용이
- 작은 단위의 컴포넌트로 분리가 쉬움
3. 최적화 용이
- React.memo를 통한 간단한 최적화
- useCallback, useMemo 등을 통한 성능 개선
4. 테스트 용이성
- 순수 함수처럼 동작하여 테스트가 쉬움
- 의존성 주입이 명확함
단점
생명주기 관리의 복잡성
- useEffect의 의존성 배열 관리가 까다로움
- 여러 효과를 조합할 때 복잡도 증가
클래스의 OOP 이점 상실
- 상속 등의 OOP 패턴 사용 불가
- 모든 것을 함수로 표현해야 함
참조