React 컴포넌트 (함수형 VS 클래스형)

React 컴포넌트

리액트(React)에서 컴포넌트(Component)는 UI를 구성하는 재사용 가능한 독립적인 모듈이다.

화면에 나타나는 각각의 독립적인 요소를 말한다. 

예를 들어 버튼, 헤더, 푸터, 입력 폼 등 모든 것들이 컴포넌트로 만들어질 수 있다.

컴포넌트 표현 방법
리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.
함수형 컴포넌트가 더 간단하고 가독성이 좋아 선호하는 추세이다.

 

클래스형 컴포넌트 방식

class MyClassComponent extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

 

함수형 컴포넌트 방식

const MyFunctionalComponent = (props) => {
  return <div>{props.message}</div>;
}

 

 

함수형 컴포넌트의 장점

• 클래스형 컴포넌트에 비해 간결한 작성 방식
• React 16.8부터 도입된 Hooks를 통한 함수형 컴포넌트에서 상태관리와 부수효과 처리
• 함수로 컴포넌트를 정의하여 필요한 곳에 재사용 용이
• 클래스형 컴포넌트 방식보다 빠른 생성과 소멸
• 테스트 용이성

클래스형 컴포넌트의 장점

• 상태와 생명주기 메서드의 명시적 정의
• 명시적인 'this' 키워드 사용
• 컴포넌트의 인스턴스화 

 

컴포넌트 방식 고려사항

• 프로젝트에서 요구하는 기능, 성능 요구사항 등 고려
• 팀원들의 경험과 선호도
• 레거시 프로젝트와의 호환성

최근 권장되는 방식은 함수형 컴포넌트이다.
하지만 레거시 코드 등 아직도 많은 프로젝트들이 클래스형 컴포넌트 방식이므로,
두가지 방식 모두 간단하게라도 아는 것을 추천하고 있다.