React 소품 – React Vernacular 운동 09

React 소품 - React Vernacular 운동 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 차이점

  1. JSX의 React 요소는 HTML 요소와 JavaScript로 구성됩니다.
  2. Component는 함수 선언이나 클래스 선언의 반환 값입니다.
  3. 구성 요소 인스턴스는 구성 요소의 인스턴스입니다.
				
					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>
      ); } } 기본 과일 내보내기;
				
			

결론

React props에서 매개변수 전달의 개념을 설명하는 것 외에도 이 문서에서는 구성 요소 선언의 다양한 방법도 설명합니다.

또한 React Components, Component 인스턴스, Elements의 차이점도 설명합니다.

위의 내용이 독자들에게 도움이 되기를 바랍니다.

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

인용하다

React Vernacular Movement 10-React 소품

리액트 토속 스포츠 시리즈

React 프로젝트 설정 – React Vernacular Movement 08

Babel & Webpack & NPM – React Vernacular Movement 07

React JSX – React 언어적 움직임 06

React 작동 방식 – React Vernacular Movement 05

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

 

코멘트를 남겨주세요

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

ko_KR한국어