Boilerplate Basics에 다시 오신 것을 환영합니다! 오늘은 React에서 컴포넌트 생성에 대해 알아보겠습니다.

React에서 페이지는 구성 요소로 구성됩니다. 이들은 애플리케이션 전체에 포함할 수 있는 자체 포함된 재사용 가능한 코드 조각입니다.

다음은 구성 요소를 정의하는 데 사용되는 구문의 예입니다.

class App extends Component {
  constructor(props) {
    super(props)
  }
  render() { `
    return (
      <h1>My fun post!</h1>
    )
  }
}

ES6와 클래스

시작하려면 React가 항상 클래스 개념을 사용하여 작동한다는 것을 아는 것이 중요합니다. 이것은 ES6 이전의 ECMAScript 표준이 클래스 개념을 지원하지 않았기 때문에 흥미롭습니다.

If you're not familiar with the relationship between ECMAScript, JavaScript and Frameworks check out this post.

자바스크립트의 레이어

로리 ・ 2019년 3월 26일 ・ 읽은 시간 3분

#javascript #learning #react

그 당시 React는 클래스를 정의하는 해결 방법을 사용했습니다. 이 같은.

const MyComponent = React.createClass({
  render() {
    return <p>I am a component!</p>;
  }
});

그러나 ES6가 등장하면서 Javascript 고유의 클래스 개념이 도입되었습니다. 이제 구성 요소는 그 위에 빌드하여 정의할 수 있습니다.

import {Component} from "react"

class App extends Component {
    ....
}

이 코드가 하는 일은 ES6의 class 개념을 취하고 React 라이브러리에 의해 정의된 다른 클래스인 Component를 사용하여 확장하는 것입니다. Component 클래스는 맨 위로 가져옵니다.

If you want more information about this import syntax you can find it here.

내보내기 및 가져오기 및 기본값, Oh My!

로리 ・ 2019년 4월 29일 ・ 읽은 시간 3분

#javascript #react #webdev #beginners

렌더에 대한 간략한 설명

결과적으로 React 클래스 구성 요소에 포함해야 하는 유일한 것은 render 메서드입니다. 이것은 이 구성 요소가 실제로 화면에 표시되는 것을 응용 프로그램에 알려주는 방법입니다. 구성 요소에 정의된 다른 모든 것은 추가입니다.

그러나 많은 구성 요소의 경우 렌더링 기능만으로는 개발자가 원하는 수준의 기능을 지원하지 않습니다. 여기에서 생성자(및 추가 사용자 정의 함수)가 필요합니다.

건설자? 소품?

컴포넌트 내부에는 생성자를 작성할 수 있는 기능이 있습니다.

  constructor(props) {
    super(props)
  }

이 코드 조각은 React 자습서에서 찾을 수 있으며 cli 자체에서 생성되지 않습니다.

constructor는 이 구성 요소 생성 시 발생하는 작업을 정의하는 함수입니다. 자세히 설명하면 ES6 클래스에서 제공하는 특수 함수이며 클래스가 초기화될 때 호출되는 첫 번째 코드 조각이 됩니다.

props가 생성자로 전달되어 클래스 내에서 내용을 참조할 수 있습니다. React에서 이것은 구성 요소가 정보를 전달할 수 있는 방법입니다.

이 슈퍼 아이템은 좀 이상해

자, 이제 생성자 안에 이 코드 줄이 있습니다.

super(props)

여기서 몇 가지 일이 발생합니다. 첫 번째는 constructor 함수를 호출할 때 super 를 호출한다는 것입니다. 이것은 우리가 확장하고 있는 constructor 클래스의 Component 함수에 저장된 구성 요소에 대한 설정 코드를 실행합니다!

이제 props를 super()에 전달하면 this 함수 내에서 props를 참조하기 위해 constructor를 사용할 수 있습니다. React는 이를 기본 모범 사례로 권장합니다. 기술적으로 생성자에서 this.props를 참조하지 않으면 참조할 필요가 없습니다. 그러나 권장 사항입니다.

구성품 구성!

그게 전부입니다. 새로운 React 구성 요소를 정의하고 올바르게 초기화하는 데 필요한 상용구 코드를 제공했습니다. 이제 소품을 전달하고 렌더링 코드를 작성하는 등의 작업을 할 수 있습니다.

내가 즐겨 말하듯이 우리는 이해하는 데 시간을 들이지 않고 프레임워크와 프로젝트 내에서 사용하지 않는 코드 줄을 너무 자주 봅니다. 눈에 보이는 모든 것을 호기심을 가지고 탐험해 보시기 바랍니다! 그것은 당신을 더 나은 프로그래머로 만들 것입니다.

앞으로 나올 Boilerplate Basics 게시물을 주목하세요!