구성 요소 연결

물론 구성 요소 기반 라이브러리에서는 하나의 구성 요소만 만드는 것이 아니라 여러 개를 만듭니다. 프로젝트에서는 페이지에 주입될 하나의 구성 요소만 제공하지만 그 안에는 수십, 수백 개의 다른 구성 요소가 있습니다. 이를 사용하는 한 가지 방법은 구성 요소를 연결하는 것입니다. 즉, 하나의 구성 요소가 다른 구성 요소를 호출하는 것입니다. , 이것은 다른 여러 자녀가 ​​있습니다.

계속하려면 한 구성 요소가 다른 구성 요소를 호출한다는 것을 이해해야 합니다. 이제 예제로 이동하겠습니다. 지난 기사에서 만든 index.html 파일에서 편집기를 엽니다.

function MyComponente() {
        return React.createElement("div", null, "Hello world");
      }

이것이 우리의 주요 구성 요소가 될 것입니다. 이제 우리는 네 개의 구성 요소를 더 만들 것입니다. 그 중 다섯 번째는 첫 번째 MyComponent 함수입니다.

      function MyComponent1(){

      }
      function MyComponent2(){

      }
      function MyComponent3(){

      }
      function MyComponent4(){

      }

      function MyComponent() {
        return React.createElement("div", null, "Hello world");
      }

이제 우리는 한 구성 요소가 다른 구성 요소의 부모가 되기를 원합니다.

function MyComponent1(){
        return React.createElement(MyComponent2)
      }
      function MyComponent2(){
        return React.createElement(MyComponent3)

      }
      function MyComponent3(){
        return React.createElement(MyComponent4)

      }
      function MyComponent4(){
        return React.createElement('p', null, 'Component 4')

      }

      function MyComponent() {
        return React.createElement("div", null, "Hello world");
      }

기본적으로 구성 요소가 자식을 호출하고, MyComponent1이 MyComponent2를 호출하고, MyComponent3를 호출하고, HTML 단락('p'), 속성 없음(null), 작성된 Component 4를 반환하는 MyComponent4를 호출합니다.

이제 생성된 첫 번째 구성 요소인 MyComponent는 다음과 같이 MyComponent1을 호출합니다.

function MyComponent() {
        return React.createElement("div", null, 
          React.createElement(MyComponent1)
        );
      }

이 경우 우리의 주요 구성 요소(MyComponent)는 1(MyComponent1)을 렌더링하는 식으로 서로를 호출합니다.

브라우저에서 보기

p의 div 안에 컴포넌트 4가 렌더링되었습니다.

<div id="app">
        <div>
            <p>Component 4</p>
        </div>
</div>

그냥 호기심에 래퍼와 컨테이너 div를 넣어봅시다.

다음과 같이 생겼습니다.

function MyComponent1() {
        return React.createElement(
          "div",
          null,
          React.createElement(MyComponent2)
        );
      }
      function MyComponent2() {
        return React.createElement(
          "div",
          null,
          React.createElement(MyComponent3)
        );
      }
      function MyComponent3() {
        return React.createElement(
          "div",
          null,
          React.createElement(MyComponent4)
        );
      }
      function MyComponent4() {
        return React.createElement("p", null, "Component 4");
      }

      function MyComponent() {
        return React.createElement(
          "div",
          null,
          React.createElement(MyComponent1)
        );
      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );

이제 변경된 사항은 코드가 더 형식화되고 구성 요소가 해당 div 안에 배치된다는 것입니다.

우리는 우리의 선물인 HTML 내에 div 체인을 갖게 될 것입니다. 다음과 같이 유지:

<div id="app">
        <div>
            <div>
                <div>
                    <div>
                        <p>Component 4</p>
                    </div>
                </div>
            </div>
        </div>
</div>

이제 이러한 구성 요소에 클래스를 추가해 보겠습니다.

함수의 두 번째 매개변수에 넣은 Null이 속성을 넣는 데 사용된다고 말했듯이 예를 들어 id를 넣을 수 있습니다.

function MyComponent1() {
        return React.createElement(
          "div",
          {id: 'components'},
          React.createElement(MyComponent3)
        );
      }

HTML:

<div id="app">
    <div>
        <div>
            <div id="components">
                <div>
                    <p>Component 4</p>
                </div>
            </div>
        </div>
    </div>
</div>

브라우저 요소 검사에서 이것을 참조하십시오.

이제 id 대신 클래스를 넣겠습니다. 하지만 React에서는 클래스를 넣지 않고 HTML에서 일반적으로 className을 넣습니다. 다음을 참조하세요.

function MyComponent1() {
        return React.createElement(
          "div",
          { className: "components" },
          React.createElement(MyComponent3)
        );
      }

여기서는 소개로 createElement를 사용하는데 보통 그 코딩에서는 JSX를 사용할 것이고 그 안에서 class라는 단어는 자바스크립트 예약어이기 때문에 충돌이 발생하기 때문에 React는 이를 className으로 변경해야 했습니다. 따라서 태그에 클래스를 포함시키려면 className 을 사용하십시오.

완료된 모든 작업은 다음과 같습니다.

function MyComponent1() {
        return React.createElement(
          "div",
          { className: "components-1" },
          React.createElement(MyComponent2)
        );
      }
      function MyComponent2() {
        return React.createElement(
          "div",
          { className: "components-2" },
          React.createElement(MyComponent3)
        );
      }
      function MyComponent3() {
        return React.createElement(
          "div",
          { className: "components-3" },
          React.createElement(MyComponent4)
        );
      }
      function MyComponent4() {
        return React.createElement(
          "p",
          { className: "components-4" },
          "Component 4"
        );
      }

            function MyComponent() {
        return React.createElement(
          "div",
          { id: "components" },
          React.createElement(MyComponent1)
        );
      }

HTML:

<div id="app">
    <div id="components">
        <div class="components-1">
            <div class="components-2">
                <div class="components-3">
                    <p class="components-4">Component 4</p>
                </div>
            </div>
        </div>
    </div>
</div>

여기에 온 것을 축하합니다. 매우 강렬하게 읽었습니다. 이것이 최종 코드였습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React JS - BEST GUIDE for Beginners!</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>

    <script>
      function MyComponent1() {
        return React.createElement(
          "div",
          { className: "components-1" },
          React.createElement(MyComponent2)
        );
      }
      function MyComponent2() {
        return React.createElement(
          "div",
          { className: "components-2" },
          React.createElement(MyComponent3)
        );
      }
      function MyComponent3() {
        return React.createElement(
          "div",
          { className: "components-3" },
          React.createElement(MyComponent4)
        );
      }
      function MyComponent4() {
        return React.createElement(
          "p",
          { className: "components-4" },
          "Component 4"
        );
      }

      function MyComponent() {
        return React.createElement(
          "div",
          { id: "components" },
          React.createElement(MyComponent1)
        );
      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

그리고 지금은 그게 다입니다. 다음 기사는 가능한 한 빨리 나올 것입니다! 그리고 그 안에서 우리는 이러한 컴포넌트 기반 자바스크립트 라이브러리와 프레임워크가 가지고 있는 주요 어려움인 단방향 데이터 흐름(One-way binding)을 다룰 것입니다.

구성 요소 체인이 있는 경우 구성 요소 간에 값을 전달하려면 어떻게 해야 합니까?

다음 기사에서 이 질문과 다른 질문에 답할 것입니다. 이 놀라운 내용을 보려면 저를 계속 팔로우하고 여기를 방문하세요!

트위터에서 나를 팔로우하세요: