React의 고급 성분 소개

The past week got me learning a lot of things, a lot of concepts I would really love to share. I would begin by discussing Higher-order functions(HOCs) In react.

react의 고급 구성 요소를 이해하기 위해서는 우선 자바스크립트의 고급 함수가 무엇인지 알아야 한다.Javascript의 고급 함수는 다른 함수를 매개 변수로 하고 다른 함수를 되돌려주는 함수입니다.고급 함수의 예는 다음과 같다..map, .filter, 등등. 나는 본고에서 그중의 몇 가지를 언급했다.

.forEach（）。map（）。필터 ()...무슨 차이가 있습니까?

존슨 오구루・ 2018년 5월 11일・ 1분 읽기

#javascript #programming #tutorial

It’s important to note that I’m assuming you have prior knowledge of React if you don’t below is an awesome tutorial by traverse media.
That aside let’s jump right in.

고급 어셈블리는 다른 어셈블리 또는 여러 어셈블리를 매개변수로 사용하여 새 어셈블리로 반환하는 어셈블리입니다.고급 함수에 비유할 수 있는데, 이것이 바로 이 이름의 유래이다.이것은 구성 요소의 논리를 다시 사용하는 데 사용되는 react의 고급 기술입니다.사이트에 있는 다른 구성 요소에서 로그인 구성 요소를 추상화하려고 할 때 HOC를 사용하면 어떻게 하는지 보여 드리겠습니다.HOC는 일반적으로 고급 반응 모드로 사용되며, 일부 구성 요소를 설계하는 데 사용되며, 이 구성 요소들은 특정한 행동을 공유하여 그들의 연결 방식을 정상적인 상태-> 도구 모드와 다르게 한다.HOCs는 고급 react 모드로서 구성 요소 논리를 다시 사용할 수 있습니다.내가 언급한 로그인 구성 요소의 기능을 고려해 보자.로그인은 사용자 이름과 암호를 값으로 하고 데이터베이스나 저장 방식 (시스템에 사용자가 존재하는 경우) 에 따라 검사하는 폼일 수 있습니다.만약에 사용자가 확실히 존재하고 입력한 비밀번호가 정확하면 프로그램 구성 요소는 내용 구성 요소를 나타내지만 사용자가 존재하지 않으면 응용 프로그램은 로그인 구성 요소를 나타내고 사이트의 사용자가 여전히 유효한 신분 검증을 가지고 있는지 검사할 때도 같은 방법을 적용할 수 있다.이 예는 고급 구성 요소를 사용하여 실행할 수 있습니다.그러나 어떻게 실현하는지, 아래의 코드는 어떻게 실현하는지 보여 준다.
응용 프로그램 구성 요소가 있다고 가정하면

   import React, { Component } from 'react'

   //below is the app component that would render to the DOM
   export default class App extends Component {
     render() {
       return (
          <div>
            <h1> Hello world </h1>
          </div>
       )
     }
   }

사용자가 세션에 로그인한 상태에 따라 렌더링할 구성 요소를 결정하기 위해 원하는 기능을 수행하려면 먼저 두 구성 요소를 만들어야 합니다.

Please note, to make this explanation as simple as it could possibly get, I would be creating all of the components inside the app.js file. And also we would be making use of create-react-app, please get it set up

다음은 로그인 구성 요소와 내용 구성 요소를 만들 것입니다. 이 두 구성 요소는 사실상 가상 구성 요소입니다. h1 표시에서 이름을 호출할 뿐입니다.

   import React, { Component } from 'react'

   // Login Component
   export default function Login {
      return (
         <div>
           <h1>Hi i'm login</h1>
         </div>
      )
   }

   //Content component
   export default function Content {
       return (
          <div>
            <h1>Hi i'm Content</h1>
          </div>
       )
   }

   //App component
   export default class App extends Component {
     render() {
       return (
          <div>
            //Add component to render here
          </div>
       )
     }
   }

각 구성 요소를 구축한 후에 우리의 HOC를 만들 때가 되었다.

Please note that you can choose to create this in a different file, but to make this article simple and straight to the point, I would be doing everything from a single file.

Content 구성 요소의 바로 아래와 App 구성 요소의 정면에서 다음 코드를 복사하여 붙여넣습니다.

  const withAuthentication = Component1 => Component2 =>
     class extends Component {
       constructor(props) {
         super(props);
         this.state = {
          isLoggedin: false,
         };
       }

       render(){
          if(this.state.isLoggedin) {
            return <Component1 />
          } else {
            return <Component2 />
          }

       }

이상의 내용은 고급 분량과 마찬가지로 간단하다.

It's of vital importance that we note how HOCs are named, it's generally accepted that they are named starting with with and then whatever their specific job is, In our case authentication. That way anyone looking at your code knows it's a Higher-order component without looking at the code, this is especially very important where the HOC leaves in a separate file.

코드를 해석하다.우리는 JavaScript의 curring 를 사용하여 HOC 에 제공된 매개변수를 수신합니다.우리가 이 두 파라미터를 HOC에 전달할 때 우리는 이렇게 한다.Component1 => Component2 =>, 이것은 사실상 우리가 하나의 방법을 설명하고 매개 변수를 전달하는 것과 같다. 이것은 정상적인 Javascript 방식이다.
더 나아가 HOC는 익명 클래스를 되돌려줍니다. 이 클래스는state 대상이 있습니다. 이 클래스는 isLoggedin 속성을 포함하고 있습니다. 응용 프로그램을 개발하는 과정에서 필요에 따라 조작하여 사용자가 언제 로그인하고 언제 로그인하지 않았는지 확인할 수 있습니다.render() 방법에 이르기까지, 우리는 isLoggedin 값의 상태를 검사하는 조건을 추가했기 때문에, 값이 무엇이든지 각각 구성 요소로 되돌아갈 것이다.
지금 당신의 머릿속의 문제는 이것을 어떻게 사용하는지 분명하다.세심한 주의를 기울여 주십시오.다음 코드를 우리가 방금 작성한 HOC withAuthentication() 아래에 즉시 복사하여 붙여넣으십시오.

  const DoAuthenticate = withAuthentication(Content, Login);

이제 함수HOC withAuthenticate에 우리의 함수DoAuthenticate를 분배함으로써 우리는 HOC에서 되돌아오는 함수를 DoAuthenticate로 설정할 것이다. 함수의 명칭 방식을 보면 하나의 구성 요소이다.

Because of how our HOC was organized, we need to make sure the Content component stays at the position of Component1 in the HOC because we expect it to be returned when the user is logged and the Login component taking the position of Component2 as defined in the HOC.

현재, 우리는 응용 프로그램 구성 요소를 통해 어떤 구성 요소를 DOM 로 렌더링할지 알고 싶지 않다. 단지 DoAuthenticate 를 렌더링하고 HOC 를 생각하게 하기만 하면 된다.마지막으로 우리의 코드는 이렇게 해야 한다.

   import React, { Component } from 'react'

   // Login Component
   export default function Login {
      return (
         <div>
           <h1>Hi i'm login</h1>
         </div>
      )
   }

   //Content component
   export default function Content {
       return (
          <div>
            <h1>Hi i'm Content</h1>
          </div>
       )
   }


   // Higher order Component
   const withAuthentication = Component1 => Component2 =>
     class extends Component {
       constructor(props) {
         super(props);
         this.state = {
          isLoggedin: false,
         };
       }

       render(){
          if(this.state.isLoggedin) {
            return <Component1 />
          } else {
            return <Component2 />
          }

       }


   const DoAuthenticate = withAuthentication(Content, Login);

   //App component
   export default class App extends Component {
     render() {
       return (
          <div>
            <DoAuthenticate />
          </div>
       )
     }
   }

Learning about HOCs was really fun for me and I made two applications during the week, to deepen my understanding of it. Here are links to the applications.

Instaclone 인스타그램 앱의 복제(완전한 복제는 아니지만...lol)와LambdaTimeX.논평 부분에서 그들이 환매한 링크를 삭제할 것이다.
당신의 이해를 깊이 있게 하기 위해서, 저는 당신이 이 HOCs에 관한 문장Sitepen을 시험해 보시기를 건의합니다.🥂🥂🥂🥂