React에서 클래스 구성 요소와 기능적 구성 요소 사이에서 선택하기

플라톤에 의해 재발행

팔로워 : 0

React PlatoBlockchain 데이터 인텔리전스에서 클래스 구성 요소와 기능 구성 요소 사이에서 선택하기. 수직 검색. 일체 포함.

핵심 차이점

React에서 컴포넌트는 사용자 인터페이스의 일부를 나타내는 코드 조각입니다. React에는 클래스 구성 요소와 기능적 구성 요소라는 두 가지 주요 구성 요소 유형이 있습니다.

클래스 구성 요소는 React.Component 클래스를 확장하는 클래스를 사용하여 정의됩니다. 기능이 더 풍부하고 상태 및 수명 주기 이벤트를 처리하기 위한 더 많은 옵션이 있습니다. 클래스 구성 요소는 다음과 같습니다.

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

기능적 구성 요소는 React 요소를 반환하는 JavaScript 함수일 뿐입니다. 클래스 구성 요소보다 간단하고 읽고 쓰기가 더 쉽습니다. 다음은 기능적 구성 요소로 작성된 위와 동일한 구성 요소입니다.

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

언제 무엇을 사용

일반적으로 상태 또는 수명 주기 메서드와 같이 클래스 구성 요소에서만 사용할 수 있는 기능을 사용해야 하는 경우가 아니면 기능적 구성 요소를 사용해야 합니다.
몇 가지가 있습니다 이유 선호하는 이유 기능적 구성 요소보다 클래스 구성 요소 사용:

가독성: 클래스 구성 요소를 사용하면 특히 상태 또는 수명 주기 메서드가 많은 경우 코드를 더 쉽게 이해할 수 있습니다. 코드는 명확하게 정의되고 찾기 쉬운 메서드로 구성됩니다.
재사용 성: 클래스 컴포넌트는 확장하여 새로운 컴포넌트를 생성할 수 있으므로 보다 쉽게 재사용할 수 있습니다. 이는 구성 요소 간에 공유 기능이 많은 경우에 특히 유용할 수 있습니다.
회사조직: 클래스 구성 요소를 사용하면 동일한 구성 요소에서 관련 메서드를 함께 그룹화할 수 있으므로 코드를 보다 쉽게 구성할 수 있습니다. 이렇게 하면 코드를 더 쉽게 찾고 유지 관리할 수 있습니다.

쓰기를 선택하려는 몇 가지 이유도 있습니다. 기능성 부품:

상태 또는 수명 주기 메서드를 사용할 필요가 없는 경우: 상태 또는 수명 주기 메서드를 사용할 필요가 없는 경우 클래스 구성 요소보다 읽고 쓰기가 더 간단하고 쉽기 때문에 기능적 구성 요소를 선택하는 것이 좋습니다.
순수 구성 요소가 필요한 경우: 기능적 구성 요소는 "순수한" 구성 요소입니다. 즉, 해당 구성 요소에만 의존하고 자체 상태가 없습니다. 이는 구성 요소가 해당 소품이 변경될 때만 다시 렌더링되도록 하려는 경우에 유용할 수 있습니다.
성능을 최적화하고 싶을 때: 기능적 구성 요소는 순수하기 때문에 React로 더 쉽게 최적화할 수 있으므로 성능이 향상될 수 있습니다.
간결하고 읽기 쉬운 코드를 작성하려는 경우: 기능적 구성 요소는 더 단순하고 움직이는 부분이 적기 때문에 특히 응용 프로그램에 많은 구성 요소가 있는 경우 읽고 이해하기가 더 쉽습니다.

일반적으로 클래스 구성 요소로만 충족될 수 있는 특정 요구 사항이 없는 한 기능적 구성 요소를 사용해야 합니다.

사용 효과 및 사용 상태

그러나 기능적 구성 요소에서도 상태 및 수명 주기 메서드를 사용할 수 있다는 점에 유의해야 합니다. 사용 상태 와 사용 효과 후크. 일반적으로 요구 사항에 가장 적합하고 코드를 가장 쉽게 읽고 이해할 수 있는 구성 요소 유형을 선택해야 합니다.

여전히 상태 또는 수명 주기 이벤트를 구현하려는 경우 후크를 사용하여 구성 요소를 활성화할 수 있습니다.

이것이 당신이 구현하는 방법입니다 사용 효과 와 사용 상태 기능적 구성 요소 내부

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

여기에는 개수를 추적하고 사용자에게 현재 개수를 표시하는 구성 요소가 있습니다. 구성 요소는 사용 상태 기능 구성 요소에 상태를 추가하는 후크 및 사용 효과 개수가 변경될 때 작업(문서 제목 업데이트)을 수행하기 위한 후크.

주요 요점

다음은 React에서 클래스 구성 요소와 기능적 구성 요소 중에서 선택할 때 주요 테이크 아웃입니다.

클래스 구성 요소는 React.Component 클래스를 확장하는 클래스를 사용하여 정의되며 상태 및 수명 주기 이벤트를 처리하기 위한 더 많은 옵션이 있습니다.
기능적 구성 요소는 React 요소를 반환하는 JavaScript 함수일 뿐이며 더 간단하고 읽고 쓰기 쉽습니다.
상태 또는 수명 주기 메서드와 같이 클래스 구성 요소에서만 사용할 수 있는 기능을 사용해야 하는 경우가 아니면 기능적 구성 요소를 사용해야 합니다.
useState 및 useEffect 후크를 사용하여 기능 구성 요소에서 상태를 추가하고 부작용을 수행할 수 있습니다.
전반적으로 클래스 구성 요소와 기능적 구성 요소 간의 선택은 요구 사항에 가장 적합한 것과 코드를 가장 쉽게 읽고 이해할 수 있도록 만드는 요소로 귀결됩니다.

이 간단한 설명이 도움이 되었으면 합니다. 멘토링이나 javascript, 반응 또는 웹 개발 전반에 대한 학습 경로에 대한 안내를 원하시면 1:1 세션을 위해 저에게 연락해 주세요.