React.app을 만들 때 컴포넌트를 사용해야 하는 이유

4073 단어 beginnerscomponentesreactwebdev
React는 생명의 은인입니다. 대화형 UI를 만드는 데 사용되는 최고의 라이브러리이기 때문에 개발자가 보다 복잡한 데이터로 애플리케이션을 더 빠르게 구축할 수 있습니다.

React를 배우는 동안 저는 JSX와 HTML과 JS의 혼합이 코딩하는 동안 삶을 더 쉽게 만들어주는 방식에 놀랐습니다. 컴포넌트에 도달하기 전까지는 말입니다.

구성 요소는 무엇입니까?



React를 큰 그림으로 상상해 봅시다. 최종 결과를 보여주고 싶지만 그 안에 얼마나 많은 분할이 있고 어떻게 개별적으로 작업해야 하는지 알아야 합니다. 스케치, 최종 그리기, 채색, 음영을 만들고 마지막으로 프레임을 만듭니다. 이것이 바로 React의 구성 요소입니다. 코드를 독립적이고 재사용 가능한 부분으로 분할하고 각 부분에서 독립적으로 작업할 수 있는 분할입니다.

이제 구성 요소가 무엇인지 알았으니 실제로 적용해야 합니다! 몇 가지 구성 요소를 사용하여 간단한 React 앱을 빌드해 보겠습니다.

React.App을 시작하는 방법을 모르는 경우 this react doc의 단계를 따르는 것이 좋습니다.

엄청난! src 폴더를 살펴보고 거기에 무엇이 있는지 봅시다.



그것들은 우리의 구성 요소 중 일부입니다! 지금까지 App이 호출되는 App.js와 Index.js 두 가지만 있습니다. 이 게시물에서는 헤더 구성 요소와 본문 구성 요소라는 두 가지를 더 만들 것입니다. 원하는 대로 구성 요소의 이름을 지정할 수 있습니다. 이것은 단지 예일 뿐입니다.

이것은 헤더 구성 요소의 코드입니다(앱에서 반환과 다음을 추가하는 사이의 모든 코드를 삭제할 수 있음).

 <div className="App">
      <header className="App-header">
        <h1>Hello!</h1>
        <h2>This is a lesson about components</h2>
      </header>
    </div>


이제 페이지는 다음과 같이 표시됩니다.



이제 몸을 만들자

<body>
        <p>In this blog post, you gonna learn the importance of React components</p>
        <p>Some of those are:</p>
        <ul>
          <li>Writing easy debugging code</li>
          <li>Create independent bits of code</li>
          <li>Make it simpler to work it more complex data</li>
        </ul>
      </body>


이 코드는 다음과 같습니다.



좋습니다... 이것은 잘 작동하는 것 같지만 우리 코드는 매우 간단합니다. 더 복잡한 데이터로 작업하는 경우 코드가 너무 많아 간단한 구문 오류가 발생하더라도 확인하기가 매우 어렵습니다. 이를 방지하기 위해 구성 요소를 만들어 봅시다.



이제 두 요소의 코드를 구성 요소로 직접 전송할 수 있습니다.



그곳에서 수행한 작업을 분석하면 구성 요소를 작성하는 동안 따라야 할 몇 가지 규칙이 있음을 알 수 있습니다.
  • 코드를 작성하기 전에 항상 React를 가져와야 합니다.
  • 반환이 있는 함수 내에 코드를 작성하십시오. 그렇지 않으면 코드가 상위 구성 요소로 전달되지 않습니다.
  • 함수는 대문자로 시작해야 합니다. 바닐라 JavaScript에서는 이름을 시작하기 위해 대문자를 사용해서는 안 된다는 것을 알고 있습니다. 하지만 이것이 React 규칙입니다. 잊지 마세요!
  • 마지막으로 구성 요소를 내보내는 것을 잊지 마십시오!

    • 내 기능을 내보내는 이유는 무엇입니까?



    그러면 다른 구성 요소가 해당 구성 요소를 사용할 수 있습니다. 내보내지 않으면 다른 요소 내에서 가져올 수 없습니다.

    이러한 구성 요소가 App 구성 요소 내에서 어떻게 보이는지 봅시다.



    브라우저를 다시 로드하면 앱에 코드를 직접 작성했을 때와 동일한 레이아웃을 볼 수 있습니다. 그러나 이제 해당 코드에 개별적으로 액세스할 수 있으며 보다 복잡한 앱에서 작업하고 빌드하기가 더 쉬워졌습니다.

    구성 요소로 즐겁게 작업하십시오!

    출처:

    Components - React Docs
    React JS Components - Geeks for Geeks
    ReactJS 18의 새로운 기능
    fetch API로 이미지 검색 및 Data URI 게시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage