집 >웹 프론트엔드 >JS 튜토리얼 >함수 구성요소는 함수형 프로그래밍과 동일합니까?

함수 구성요소는 함수형 프로그래밍과 동일합니까?

Mary-Kate Olsen원래의: 2025-01-22 02:32:13182검색

Do Function Components Equal Functional Programming?

React 개발자는 React에 두 가지 구성 요소 유형이 있다는 사실을 이미 잘 알고 있습니다.

클래스 구성요소
함수 구성요소

'클래스'와 '함수'에 대한 언급을 고려하면 자연스럽게 질문이 떠오릅니다.

클래스 구성요소는 객체지향 프로그래밍(OOP)과 관련이 있나요?
기능적 구성요소는 함수형 프로그래밍(FP)과 관련이 있나요?

결국 클래스 구성 요소가 OOP와 관련되어 있다면 OOP 원칙(상속, 캡슐화, 다형성 등)이 클래스 기반 구성 요소 개발을 안내할 수 있습니다. 마찬가지로 FP 원칙은 기능적 구성 요소에 영향을 미칠 수 있습니다. 즉, 이러한 프로그래밍 패러다임의 모범 사례를 React 프로젝트에 직접 적용할 수 있습니다.

그렇다면 함수형 컴포넌트와 함수형 프로그래밍의 관계는 무엇일까요? 이 기사에서는 이 주제를 다룰 것입니다.

프로그래밍 패러다임과 DSL

우선, 프레임워크 구문은 본질적으로 특정 도메인의 개발을 위해 맞춤화된 DSL(Domain Specic Language)이라는 점을 분명히 해야 합니다.

예를 들어 React는 뷰 구축을 위한 DSL입니다. 다양한 플랫폼은 다양한 프레임워크를 사용하여 뷰를 작성하지만 예를 들면 다음과 같습니다.

웹측: ReactDOM
미니 프로그램: 타로
기본 개발: ByteDance의 내부 프레임워크 React Lynx

이러한 프레임워크는 일반적으로 동일한 DSL(React 구문)을 따릅니다. 이 DSL은 특정 프로그래밍 패러다임에 묶여 있지 않지만 뷰 개발에 매우 적합한 언어 기능 집합으로 보아야 합니다.

그래서 React DSL의 일부로:

함수 구성요소는 OOP 원칙을 구현할 수 있습니다.
수업 구성 요소는 FP 원칙을 반영할 수 있습니다.

이러한 원칙이 개발 관점에서 유익하다면 DSL에 통합될 수 있습니다.

예를 들어 OOP에서 상속보다 구성의 원칙을 보여주는 WelcomeMessage와 LogoutButton으로 구성된 다음 기능 구성 요소 헤더를 생각해 보세요.

<code class="language-javascript">function Header(props) {
  return (
    <div>
      <WelcomeMessage name={props.name} />
      <LogoutButton onClick={props.onLogout} />
    </div>
  );
}</code>

마찬가지로, 상태 카운트가 돌연변이(this.state.count)가 아닌 불변 데이터로 this.setState를 호출하여 업데이트되는 클래스 구성요소 Cpn을 생각해 보세요.

<code class="language-javascript">class Cpn extends React.Component {
  // ...
  onClick() {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  }
  render() {
    // ...
  }
}</code>

불변 데이터를 사용하는 것은 FP의 원칙을 반영합니다.

따라서 React 기능을 탐색할 때 다음 세 가지 단계를 고려해야 합니다.

React의 핵심 개발 철학은 무엇인가요?
이 아이디어를 구현하기 위해 다양한 프로그래밍 패러다임의 어떤 아이디어가 사용되었나요?
이러한 아이디어를 React에 어떻게 적용할 수 있나요?

이 사고 과정을 함수형 구성 요소와 함수형 프로그래밍 간의 관계에 적용하면 다음과 같은 결과를 얻을 수 있습니다.

함수 구성 요소는 구현(3단계)의 결과입니다.
함수형 프로그래밍은 프로그래밍 패러다임입니다(2단계).

이는 둘 사이의 관계를 정의합니다. 기능적 구성 요소는 React에서 여러 프로그래밍 패러다임(주로 OOP 및 FP)을 구현한 산물이며 그 과정에서 FP의 일부 아이디어를 차용합니다.

기능적 구성 요소를 React의 함수형 프로그래밍 구현으로만 보아서는 안 됩니다.

기능부품의 진화

앞서 언급한 3단계 사고 과정을 사용하여 기능적 구성 요소의 진화를 살펴보겠습니다. React의 개발 철학은 다음 공식으로 가장 잘 표현됩니다.

<code class="language-javascript">function Header(props) {
  return (
    <div>
      <WelcomeMessage name={props.name} />
      <LogoutButton onClick={props.onLogout} />
    </div>
  );
}</code>

이 개념을 실현하려면 두 가지 핵심 요소가 필요합니다.

데이터 스냅샷
함수 매핑

여기서는 FP의 불변 데이터가 데이터 스냅샷의 전달자로 더 적합합니다. 이것이 React의 상태가 불변인 이유입니다. 상태의 본질은 스냅샷입니다.

기능 매핑 캐리어에 대한 특정 요구 사항은 없습니다. React에서는 모든 업데이트가 다시 렌더링을 트리거하고 렌더링 프로세스 자체가 함수 매핑 프로세스입니다. 입력은 props와 state이고 출력은 JSX입니다.

반대로 Vue 구성 요소는 OOP 원칙에 더 부합합니다. 다음 Vue 앱 구성 요소를 고려해보세요.

<code class="language-javascript">class Cpn extends React.Component {
  // ...
  onClick() {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  }
  render() {
    // ...
  }
}</code>

컴포넌트의 설정 메소드는 초기화 중에 한 번만 실행됩니다. 후속 업데이트 작업은 OOP의 인스턴스 개념에 해당하는 클로저 내의 동일한 데이터에 대해 작동합니다.

React는 함수 매핑의 전달자에 특별한 요구 사항을 부과하지 않으므로 클래스 구성 요소와 함수 구성 요소 모두 실행 가능한 옵션입니다.

함수 컴포넌트가 클래스 컴포넌트를 대체한 이유는 무엇인가요?

많은 사람들은 후크를 통해 로직의 재사용성을 향상시키는 것이 기능적 컴포넌트가 클래스 컴포넌트보다 우수한 주된 이유라고 믿습니다. 그러나 특히 TypeScript와 결합된 데코레이터 기반 클래스 개발 모델은 논리 재사용의 효과적인 방법임이 입증되었습니다.

실제 이유는 함수 컴포넌트가 UI = fn(snapshot) 개념을 더 잘 구현할 수 있기 때문입니다.

앞서 언급했듯이 수식의 스냅샷은 상태의 스냅샷을 나타내며 React에는 다음이 포함됩니다.

상태
소품
컨텍스트

지정된 구성 요소에 대해 공식 UI = fn(snapshot)은 동일한 스냅샷이 동일한 출력(JSX)을 생성하도록 보장합니다. 그러나 상태 업데이트는 데이터 가져오기 또는 DOM 조작과 같은 부작용을 유발할 수도 있습니다.

클래스 컴포넌트에서는 이러한 부작용 로직이 다양한 라이프사이클 메소드에 분산되어 있어 React를 제어하기가 어렵습니다. 하지만 함수 구성요소에서는:

부작용은 useEffect로 제한됩니다. React는 새로운 부작용을 적용하기 전에 이전 렌더링의 부작용이 (useEffect의 반환 값을 통해) 정리되는지 확인합니다.
ref의 전파는 forwardRef와 같은 메커니즘을 통해 제한되어 잠재적인 영향을 제한합니다.
데이터 가져오기 부작용은 Suspense에서 다음과 같이 관리됩니다.

<code>UI = fn(snapshot);</code>

사용법:

<code class="language-javascript">const App = {
  setup(initialProps) {
    const count = reactive({ count: 0 });
    const add = () => { count.value++; };
    return { count, add };
  },
  template: "...omitted"
};</code>

간단히 말하면 기능적 구성 요소는 부작용을 제어 가능한 상태로 유지하여 동일한 스냅샷 입력에 대해 일관된 출력을 제공합니다. 이는 FP의 순수 함수 개념과 일치하며, 이것이 React에서 함수형 구성 요소가 주류 선택이 된 이유입니다.

결론

함수 컴포넌트는 React에서 함수형 프로그래밍을 직접 구현한 것은 아니지만, React UI = fn(snapshot)의 핵심 개념을 구현하는 데 가장 적합한 캐리어입니다. React는 FP가 가장 큰 영향을 미치는 다양한 프로그래밍 패러다임의 우수한 아이디어를 통합합니다. 궁극적으로 모든 디자인 선택은 전반적인 아이디어를 제공합니다.