ES5 기능만 사용하여 React 구성 요소 만들기

이 게시물은 React가 "그냥 자바스크립트일 뿐"이라는 친근한 알림이 될 것입니다. 빌드 단계 없이 사용해도 괜찮습니다. 작은 대화형 구성 요소를 만드는 데 사용하는 것은 괜찮습니다. 그리고 원하지 않는다면 ES6+를 사용할 필요가 없습니다.

createElement 함수에 대한 요약

React는 모든 구성 요소의 빵과 버터인 createElement라는 함수를 노출합니다. JSX는 실제로 React.createElement 호출로 변환되는 구문 설탕입니다. 다음과 같이 보입니다.

React.createElement(
    'tagName',       // HTML tag name or a custom component 
    props,           // HTML attributes, custom properties, events, etc...
    children         // a string or a list of components or almost anything
);

상태 비저장 구성 요소

이 유형의 구성 요소는 React 요소props만 가져오고 반환합니다. 자체 상태를 관리하지 않으며 수명 주기 메서드가 없습니다. 다른 소스에서 가져온 데이터를 표시하는 데 적합합니다. 빌드 단계가 없으면 다음과 같이 보일 수 있습니다.

function Welcome(props) {
    return React.createElement('div', null, 'Hello, ' + props.name);
}

ReactDOM.render(Welcome({ name: 'world' }), container);

클래스 구성요소

이러한 구성 요소는 자체 내부 상태를 관리하고 수명 주기 메서드를 가질 수 있습니다. ES5에서는 class 키워드를 사용하여 구성 요소를 생성할 수 없으며 대신 해당 동작을 모방해야 합니다.

가장 먼저 처리해야 할 것은 상속입니다. 일반적으로 그렇게 하려면 class MyComponent extends React.Component를 사용합니다. 우리는 다른 길을 택할 것입니다. 다음과 같이 구성 요소의 prototype 개체를 React.Component의 개체로 재정의하여 상속을 "강제"합니다.

function MyComponent(props) {
    React.Component.constructor.call(this);

    // ... code
}

MyComponent.prototype = Object.create(React.Component.prototype);

여기에서 stateless 컴포넌트와 다른 점은 사용자 정의 컴포넌트의 컨텍스트로 React.Component 생성자를 호출하고 프로토타입이 React.Component 의 프로토타입인지 확인한다는 것입니다. 이를 통해 이제 우리 구성 요소는 수명 주기 메서드와 setState 메서드를 사용할 수 있습니다.

예제 코드

이제 새로 발견한 지식으로 빌드 단계를 설정하거나 브라우저 지원에 대해 너무 많이 걱정하지 않고도 일부 구성 요소를 만들 수 있습니다. 간단한 타이머를 만들어 보겠습니다.

var container   = document.getElementById('app');

// h is short for hyperscript and it makes everything a little bit easier
var h           = React.createElement;

// This is how we inherit methods like setState from React.Component
Timer.prototype = Object.create(React.Component.prototype);

function Timer(props) {
  React.Component.constructor.call(this);
  var self = this;

  self.state = { seconds: 0 };

  self.tick = function() {
    self.setState(function(prevState) {
      return { seconds: prevState.seconds + 1 };
    });
  };

  self.componentDidMount = function() {
    self.interval = setInterval(self.tick, 1000);
  };

  self.componentWillUnmount = function() {
     clearInterval(self.interval);
  };

  self.render = function() {
    return h('div', null, 'seconds: ', self.state.seconds);
  }
}

ReactDOM.render(h(Timer), container);

여기에서 Function 프로토타입의 this 메서드를 사용하지 않기 위해 self 변수에 bind 컨텍스트를 할당하고 있음을 주목하십시오. 그리고 self.tick 에서 사용할 때 this 컨텍스트를 잃게 되는 setInterval 에서만 필요하다고 생각하지만 일관성을 위해 모든 곳에서 사용하고 있습니다.

마지막 한가지

사람들이 처음에 알아채지 못하는 한 가지는 요소의 자식도 매개변수라는 것입니다. 구성 요소, 문자열, 개체 또는 함수를 전달할 수 있습니다. 하루가 끝나면 children 소품입니다.

내가 당신에게 뭔가를 보여 드리겠습니다.

결론

이것은 효과가 있으며 그렇게 나쁘지 않습니다. 이는 React를 기존 스크립트 태그와 함께 사용하여 모든 사이트에 삽입할 수 있음을 보여줍니다. 또 다른 것은 React Component가 함수 호출이라는 것입니다. 생각할 수 있는 모든 것을 할 수 있습니다. 정말로, 발에 총을 쏘는 것을 포함하여 무엇이든 할 수 있으니 조심하세요.

기타 리소스

Todo List example
Timer example
React without a build step
React is just JavaScript


읽어 주셔서 감사합니다. 이 문서가 유용하고 내 노력을 지원하고 싶다면 buy me a coffee ☕ .