Create a Component Class

Create a Component Class

You’ve learned that a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML.

 

Here’s another fact about components: every component must come from a component class.

 

A component class is like a factory that creates components.

If you have a component class, then you can use that class to produce as many components as you want.

To make a component class, you use a base class from the React library: React.Component.

 

What is React.Component, and how do you use it to make a component class?

React.Component is a JavaScript class.

To create your own component class, you must subclass React.Component.

You can do this by using the syntax class YourComponentNameGoesHere extends React.Component {}.

 

JavaScript classes and subclassing are a complex topic beyond the scope of this course.

If you aren’t comfortable with them, here are some good resources to consult: 1 2 3 4.

Look at the code in app.js. A lot it is still unfamiliar, but you can understand more than you could before!

 

On line 4, you know that you are declaring a new component class, which is like a factory for building React components. You know that React.Component is a class, which you must subclass in order to create a component class of your own. You also know that React.Component is a property on the object which was returned by import React from 'react' on line 1.

 

---

Create a Component Class

 

당신은 리액트 컴포넌트는 하나의 작업을 담당하는 작고 재사용 가능한 코드 조각이며, HTML 렌더링을 수반하는 경우가 많다는 것을 배웠다. 

 

여기 컴포넌트에 대한 또다른 사실이 있다. : 모든 컴포넌트는 클래스 컴포넌트로부터 와야만 한다.

 

 

class 컴포넌트는 컴포넌트를 만드는 공장(요소)과 같다 

 

만약 당신이 클래스 컴포넌트를 갖고 있다면,

당신은 당신이 원하는 만큼 많은 컴포넌트를 생성할 클래스를 사용할 수 있다. 

클래스 컴포넌트를 만들기 위해서, 당신은 react 라이브러리로부터 base class를 사용해야한다. : React.Component

 

React.Component란 무엇이고 클래스 컴포넌트를 만들기 위해서 당신은 어떻게 이것을 사용해야하는가?

React.Component는 자바스크립트 class이다. 

당신의 자신만의 컴포넌트 class를 생성하기위해, 당신은 React.Component를 subclass 해야한다. 

당신은 문법을 사용함으로써 이것을 할 수 있다.  'class YourComponentNameGoesHere extends React.Component {}.'

 

자바스크립트 클래스들과 subclassing은 이 과정의 범위를 넘은 복잡한 주제이다. 

만약 그것들에 대해 편안함을 느끼지 못한다면, 여기 몇가지 좋은 자료들이 있다.  1 2 3 4.

15. Classes

 

app.js에서 코드를 보아라. 

 

여전히 많은 것들이 친숙하지 않다. 그러나 당신은 이전보다 더 이해할 수 있다.

 

4번째 라인에서, 당신은 리엑트 컴포넌트를 생성하기 위한 공장같은 새로운 컴포넌트 클래스를 정의하는 것을 안다. 

당신은 React.Component는 class이며, 당신은 자신의 컴포넌트 class를 생성하기 위해 subclass를 해야만한다는 것을 알고 있다 .

 

당신은 또한 React.Component 는 1째줄에 import React from 'react' 에의해 반환된 객체의 속성이러눈 것을 알고 있다. 

 

 

출처: 코드카데미