[React] 함수형 컴포넌트(Functional Component) 장점 과 단점

장점

1. 코드의 간결성과 가독성

• 함수형 컴포넌트는 클래스 컴포넌트에 비해 더 간결하고 선언적인 방식으로 컴포넌트를 정의할 수 있습니다. 이는 코드의 가독성을 향상시키고, 개발자가 UI의 구조를 더 쉽게 이해할 수 있게 합니다.

2. React Hooks의 장점

• 상태 관리: useState를 사용하여 함수형 컴포넌트 내에서도 상태를 쉽게 관리할 수 있습니다.
• 생명주기 접근: useEffect를 통해 클래스 컴포넌트의 생명주기 메서드에 해당하는 작업을 수행할 수 있으며, 코드의 위치를 기반으로 작업을 구성할 수 있어 로직이 더 명확해집니다.
• 재사용 가능한 로직: 커스텀 훅을 만들어 특정 로직을 여러 컴포넌트 간에 쉽게 공유하고 재사용할 수 있습니다. 이는 코드의 DRY(Don't Repeat Yourself) 원칙을 잘 지키게 해줍니다.
• 컴포넌트 구조의 단순화: 여러 하위 컴포넌트에 걸쳐 있던 상태 로직을 하나의 훅으로 추출함으로써, 컴포넌트 계층을 단순화할 수 있습니다.

3. 성능 최적화

• React.memo, useMemo, useCallback과 같은 훅을 사용하여 컴포넌트의 불필요한 렌더링을 방지하고, 성능을 최적화할 수 있습니다. 이러한 최적화 기법은 특히 대규모 애플리케이션에서 렌더링 성능을 크게 향상시킬 수 있습니다.

4. 더 나은 테스트와 디버깅

• 함수형 컴포넌트는 순수 함수의 형태를 띠고 있기 때문에, 테스트와 디버깅이 용이합니다. 특히, 상태와 효과를 명확히 분리할 수 있어, 예측 가능한 컴포넌트의 동작을 보장하고, 단위 테스트를 더 쉽게 작성할 수 있습니다.

5. 컴포넌트의 재사용성과 조합성

• 함수형 컴포넌트와 커스텀 훅은 재사용성이 높으며, 이를 통해 개발자는 작고 재사용 가능한 컴포넌트를 만들어 애플리케이션을 조립할 수 있습니다. 이는 코드의 중복을 줄이고, 프로젝트의 유지 보수성을 향상시킵니다.

6. 미래 지향적인 개발 방식

• React 팀은 함수형 컴포넌트와 Hooks를 미래의 React 개발의 핵심으로 보고 있습니다. 새로운 기능과 개선 사항은 주로 함수형 컴포넌트를 위해 설계되고 있으며, 이를 사용함으로써 최신 React 개발 트렌드를 따를 수 있습니다.

단점

함수형 컴포넌트는 많은 장점을 가지고 있으며, React Hooks의 도입으로 그 사용 범위와 가능성이 크게 확장되었습니다. 그러나 몇 가지 단점이나 고려해야 할 점들도 있습니다:

1. 메모리 사용량

• 함수형 컴포넌트는 매 렌더링마다 함수가 호출됩니다. 이 과정에서 Hooks와 같은 추가적인 메모리 사용이 발생할 수 있으며, 이는 특히 메모이제이션을 남용할 경우 더욱 두드러질 수 있습니다.

2. 최적화에 대한 오해

• React.memo, useMemo, useCallback 등을 사용해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있습니다. 하지만 이들을 잘못 사용하면 오히려 성능 저하를 초래하거나 코드 복잡도를 증가시킬 수 있습니다. 최적화가 필요한 상황을 정확히 파악하고 적절히 사용하는 것이 중요합니다.

3. 학습 곡선

• Hooks와 같은 개념은 초보자에게는 다소 어렵게 느껴질 수 있습니다. 특히 useState, useEffect와 같은 기본 Hooks의 사용법을 익히는 것부터, useReducer, useContext 같은 고급 Hooks까지 학습해야 하므로, 클래스 컴포넌트에 비해 학습 곡선이 가파를 수 있습니다.

4. Hooks 규칙 준수

• Hooks를 사용할 때는 React 팀이 제시한 규칙을 엄격히 준수해야 합니다. 이 규칙을 위반할 경우 애플리케이션이 예상치 못한 방식으로 동작할 수 있으며, 이는 디버깅을 어렵게 만듭니다.

5. 타입스크립트와의 호환성

• 함수형 컴포넌트와 Hooks를 타입스크립트와 함께 사용할 때, 타입 정의와 관련된 추가적인 고려가 필요합니다. 타입스크립트의 엄격한 타입 체킹은 때때로 Hooks 사용 시 타이핑을 더 복잡하게 만들 수 있습니다.

6. 생명주기 메서드의 직관성 부족

• useEffect를 사용하여 여러 생명주기 메서드를 흉내 낼 수 있지만, 때로는 클래스 컴포넌트에서 제공하는 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기 메서드가 더 직관적으로 느껴질 수 있습니다. 특히 복잡한 생명주기 로직을 구현할 때, Hooks의 사용이 코드의 가독성을 저하시킬 수 있습니다.

함수형 컴포넌트와 React Hooks를 사용하면, 개발자는 더 간결하고, 유지 관리가 용이하며, 재사용 가능한 컴포넌트를 만들 수 있습니다. 이러한 접근 방식은 현대적인 웹 개발에서 중요한 역할을 하며, 애플리케이션의 품질과 개발 효율성을 높이는 데 크게 기여합니다. 그러나 그 사용에 있어서는 주의 사항을 이해하고, 각 프로젝트의 요구 사항에 맞춰 적절히 적용하는 것이 중요합니다.