React Part 1 학습: 상태 비저장 구성 요소

React에서 stateless 구성 요소를 정의하는 것은 Vue와 어떻게 다릅니까? 이 기사는 나의 초기 관찰을 살펴보고 과거에 주로 Vue로 작업한 React 학습 경험을 다루는 시리즈의 첫 번째 기사입니다.

React에서 상태 비저장 구성 요소 정의

import React from 'react';

const myComponent = props => {
    return (
        <div className="myComponent">
            <p>props.myProp</p>
        </div>
    );
}

export default myComponent;

Vue와 마찬가지로 React에는 구성 요소를 정의하는 방법이 두 가지 이상 있습니다. 대부분의 SPA는 기본적으로 구성 요소 트리이고 애플리케이션의 UI를 구축하는 데 사용되는 가장 일반적인 유형의 구성 요소는 프리젠테이션 또는 상태 비저장입니다. Stateless 구성 요소는 시작하기에 좋은 장소인 것 같습니다.

React에서 stateless 구성 요소를 정의하는 가장 일반적인 방법은 기능적 구성 요소 구문을 사용하는 것입니다. 본질적으로, 당신은 ReactDOM.render() 에 전달될 함수를 단순히 정의하고 내보내는 것입니다.

이 함수는 구성 요소를 return 문으로 캡슐화합니다. JSX에서는 하루가 끝나면 JavaScript에 불과합니다. 한 줄이거나 여러 줄/중첩 마크업의 경우 괄호 사이에 있는 괄호 없이 이 작업을 수행할 수 있습니다.

    const component = () => return <div>Hello world!</div>

    const component = () => return (
        <div>
            <h1>Hello World</h1>

            <p>This is multiline JSX</p>
        </div>
    )

무대 뒤에서 React는 DOM에서 실제 마크업을 렌더링하기 위해 React.createElement()를 사용하고 있습니다. 이 함수는 3개의 인수를 취합니다. 태그 유형은 문자열, 속성이 포함된 객체(있는 경우), 마지막으로 텍스트/내용입니다. 이것은 고안된 예입니다. 해당 요소에 여러 개의 중첩된 자식을 가질 수 있으므로 이러한 방식으로 마크업을 설명하는 것이 얼마나 번거로운지 알 수 있습니다.

속성은 Vue SFC와 약간 다르게 처리됩니다. 실제로 HTML이 아닌 JSX로 작업하기 때문에 camelCase는 속성 작업에 사용됩니다.

따라서 class="myComponentClass"는 React에서 className="myComponentClass입니다.

마지막 단계는 다른 구성 요소에서 사용할 수 있도록 구성 요소 자체를 내보내는 것입니다.

이 구성 요소는 상태를 유지하지 않으므로 소비자가 전달할 데이터에 액세스하기 위해 구성 요소에 할당된 화살표 함수에서 props 인수를 전달하는 것이 중요합니다.

Vue SFC에서 상태 비저장 구성 요소 정의

<template functional>
    <div class="myComponent">
        <p>{{myProp}}</p>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';

@Component
export default class extends Vue {
    @Prop
    myProp: string;
}
</script>

Vue는 단일 파일 구성 요소 구문과 함께 다른 접근 방식을 사용하므로 하나의 파일에 마크업, 스크립트 및 스타일을 정의할 수 있습니다. 이는 단순한 규칙이지만. 또한 별도의 해당 파일에서 SFC를 정의하고 HTML 파일에서와 마찬가지로 .vue 템플릿 파일에서 스타일과 스크립트를 참조할 수 있습니다.

마크업은 <template></template> 태그에 정의되어 있으며 데이터를 바인딩하는 이중 콧수염{{}}을 사용하여 보간으로 props에 직접 액세스하고 조작할 수 있습니다. SFC의 여는 태그에서 functional 뒤에 template 키워드를 전달하거나 일반 구문으로 구성 요소를 정의할 때 소품으로 전달하는 것이 중요합니다.

JSX 없이

Vue.Component('my-component', {
    functional: true,
    props: [myProp],
    render: (createElement, context) {
        return createElement('p', props.myProp)
    }
})

JSX 사용

Vue.Component('my-component', {
    functional: true,
    props: [myProp],
    render: (h) => (
            <p>props.myProp</p>
        )

그런 다음 스크립트 태그에서 구성 요소를 정의합니다. 이를 수행하는 방법에는 여러 가지가 있습니다. Vue가 컴파일 프로세스에서 이해하고 사용할 수 있는 데코레이터를 사용하여 구성 요소를 정의할 수 있는 vue-property-decorator 라이브러리와 함께 TypeScript를 사용하는 클래스 기반 구성 요소를 선호합니다.
@Prop를 사용하면 구성 요소에 prop 속성을 정의할 수 있으며 필요한 경우 기본값을 정의할 수도 있습니다.
@Component는 실제로 vue-property-decorator가 크게 의존하는 Vue 클래스 구성 요소 라이브러리의 일부입니다. 이 데코레이터를 사용하면 클래스 스타일 구문을 사용하여 구성 요소를 정의할 수 있습니다.

이것은 내가 React를 배우는 과정을 진행하면서 상태 비저장 구성 요소에 대한 나의 예비 생각입니다. 후속 게시물에서는 다른 측면, 유사점 및 차이점에 대해 살펴볼 것입니다.