React 소품 - React Vernacular Movement 09

머리말

React 프로젝트 설정 – React Vernacular Movement 08 환경 설정, 프로젝트 빌드, 프로젝트 시작 등 React 프로젝트 설정 방법을 소개합니다.

이 기사에서는 React 구문에 대해 더 자세히 설명합니다. React JSX – React 언어적 움직임 06 React 컴포넌트를 생성하는 방법과 상위 컴포넌트와 하위 컴포넌트 간의 관계를 배웠습니다. 이 글에서는 React 컴포넌트 선언, React Props를 포함한 React Props의 개념을 소개합니다.

리액트 컴포넌트 선언

먼저 이전 JSX 기사의 구문을 사용하여 여기에서 React 구성 요소의 구문과 선언을 설명하겠습니다.

				
					import React from 'react-dom/client'; const myElement = ( <ul> <li>사과</li> <li>바나나</li> <li>체리</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));

위 코드에서 볼 수 있듯이 myElement라는 요소가 먼저 루트에서 선언되고 렌더링됩니다. 그러나 한 파일에서 렌더링하는 것 외에도 다른 파일에서 이미 작성된 구성 요소를 로드할 수도 있습니다.

따라서 먼저 위 파일을 일부 수정하고 이름을 app.js로 지정하세요. 추가적으로 Fruit.jsx라는 컴포넌트가 선언되어 있는데, 여기서도 2개의 선언이 이루어집니다.

app.js

				
					import React, { Component } from &#039;react&#039;; import Fruit from &#039;./fruits&#039; 클래스 앱 확장 Component { render() { return (
            <div classname="App">
                <ul>
                    <fruit fruit_name="banana"/>
                    <fruit fruit_name="apple"/>
                </ul>
            </div>

        ); } } 기본 앱 내보내기;

과일.jsx

함수 선언

				
					import React from &#039;react&#039; const Fruit = (props) =&gt; { return <p> 이것은 {props.fruit_name}입니다.</p>
} 기본 과일 내보내기;

클래스 선언

				
					import React from &#039;react&#039; 클래스 Fruit 확장 React.Component { render() { return (
        <p> 이것은 {this.props.fruit_name}입니다.</p>
      ); } } 기본 과일 내보내기;

위의 두 가지 선언 방법 모두 props를 전달할 수 있지만 현재는 함수 선언을 직접 사용하는 방법이 주류이며 작성 방법도 비교적 간단합니다.

React 컴포넌트, 컴포넌트 인스턴스, Elements 차이점

JSX의 React 요소는 HTML 요소와 JavaScript로 구성됩니다.
Component는 함수 선언이나 클래스 선언의 반환 값입니다.
구성 요소 인스턴스는 구성 요소의 인스턴스입니다.

				
					import React, { Component } from &#039;react&#039;; const Fruit = (props) =&gt; { // Fruit()은 컴포넌트 반환입니다. <p> 이것은 {props.fruit_name}입니다.</p> // <p></p> 내부는 요소 } const 바나나 = <fruit fruit_name="banana" /> // 바나나는 컴포넌트 컴포넌트 인스턴스 클래스의 인스턴스입니다. App Extensions Component { render() { return (
            <div classname="App">
                <ul>
                    {바나나}
                    <fruit fruit_name="apple" />
                </ul>
            </div>

        ); } } 기본 앱 내보내기;

반응 소품

상위 컴포넌트와 하위 컴포넌트에서 함수의 인수 개념과 유사하게 매개변수 값을 전달하려면 props를 사용하여 전달할 수 있습니다. 그러나 함수로 선언된 구성요소와 카테고리로 선언된 구성요소 간에는 여전히 약간의 차이가 있습니다.

함수 선언

함수 선언은 인수와 유사하여 외부 컴포넌트를 사용할 경우 매개변수를 사용하여 전달할 수 있고, 함수 컴포넌트 자체는 props.[변수명]을 사용하여 전달할 수 있음을 알 수 있습니다.

				
					import React from &#039;react&#039; const Fruit = (props) =&gt; { return <p> 이것은 {props.fruit_name}입니다.</p>
} 기본 과일 내보내기;

클래스 선언

카테고리 자체는 객체지향 프로그래밍 언어의 개념입니다. 카테고리는 자체 변수를 가지며 props는 {this.props.[변수 이름]}을 통해 전달됩니다.

				
					import React from &#039;react&#039; 클래스 Fruit 확장 React.Component { render() { return (
        <p> 이것은 {this.props.fruit_name}입니다.</p>
      ); } } 기본 과일 내보내기;