클래스형 컴포넌트
React의 초기 버전에서는 클래스형 컴포넌트가 주로 사용되었습니다. 클래스형 컴포넌트는 ES6 클래스로 정의되며, React의 기능들을 상속받아 사용합니다. render() 메서드를 통해 JSX를 반환하여 UI를 렌더링합니다. 상태(State)를 관리하기 위해 constructor에서 this.state 객체를 초기화하고, 이후에 setState 메서드를 사용하여 상태를 변경합니다.
함수형 컴포넌트와 Hooks
함수형 컴포넌트는 최근 React에서 주로 사용되고 있는 추세입니다. 함수형 컴포넌트는 간단하고 읽기 쉽게 작성할 수 있으며, React Hooks를 통해 상태 관리와 라이프사이클을 처리할 수 있습니다.
함수형 컴포넌트와 Hooks의 장점
함수형 컴포넌트와 Hooks를 사용하는 것이 클래스형 컴포넌트보다 권장되는 이유는 다음과 같습니다.
간결성
함수형 컴포넌트는 클래스형 컴포넌트보다 코드가 더 간결하고 읽기 쉽습니다. render() 메서드 없이 바로 JSX를 반환하기 때문에 컴포넌트를 작성하는 데에 더 적은 코드가 필요합니다.
성능 개선
함수형 컴포넌트와 Hooks를 사용하면 불필요한 라이프사이클 메서드 호출을 피하고 성능을 개선할 수 있습니다. Hooks를 사용하여 상태와 라이프사이클을 관리하면, 컴포넌트가 더 효율적으로 렌더링됩니다.
주의할 점
함수형 컴포넌트와 Hooks를 사용하면서 주의할 점도 있습니다. Hooks를 사용하는 함수형 컴포넌트는 항상 최상위 레벨에서 호출되어야 합니다. 조건문이나 반복문 안에서 Hooks를 호출하면 제대로 동작하지 않을 수 있습니다. 또한, Hooks를 사용하는 함수형 컴포넌트의 이름은 반드시 대문자로 시작해야 합니다. 이러한 규칙을 지켜야 Hooks가 올바르게 동작합니다.
컴포넌트 성능 최적화
클래스형 컴포넌트와 함수형 컴포넌트 모두 성능을 최적화하는 방법이 있습니다. React.memo를 사용하여 컴포넌트를 메모이제이션하거나, 함수형 컴포넌트에서 useCallback과 useMemo를 사용하여 불필요한 렌더링을 방지할 수 있습니다. 또한, React 개발 도구를 활용하여 성능 측정과 분석을 진행할 수 있습니다.