The Render Function

The Render Function

A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. Let’s talk about these instructions!

 

For starters, these instructions should take the form of a class declaration body.

That means that they will be delimited by curly braces, like this:

 

class ComponentFactory extends React.Component {
    // instructions go here, between the curly braces
}

 

The instructions should be written in typical JavaScript ES2015 class syntax.

There is only one property that you have to include in your instructions: a render method.

A render method is a property whose name is render, and whose value is a function.

The term “render method” can refer to the entire property, or to just the function part.

 

class ComponentFactory extends React.Component {
  render() {}
}

A render method must contain a return statement. Usually, this return statement returns a JSX expression:

 

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

 

Of course, none of this explains the point of a render method.

All you know so far is that its name is render, it needs a return statement for some reason, and you have to include it in the body of your component class declaration. We’ll get to the ‘why’ of it soon!

 

 

---

The Render Function  (렌더 함수)

 

컴포넌트 클래스는 컴포넌트를 생성하는 공장과 같다. 

이것은 당신이 제공해야하는 일련의 지침들을 컨설팅함으로써 이러한 컨포넌트들을 생성한다. 

이러한 지시사항들에 대해 알아보자!

 

우선, 이러한 지시들은 class declaration body의 형태를 취해야 한다.

이는 다음과 같이{}로 구분된다는 것을 의미한다.

class ComponentFactory extends React.Component {
    // instructions go here, between the curly braces
}

 

이 지시들은  ES2015 class syntax. js에 쓰여진 대로 해야한다. 

 

당신의 instructions에 포함해야만 하는 단 한개의 속성만 있을 수 있다. : a render method.

 

a render method는 이름이 render인 속성이다. 그리고 이것의 값은 함수이다. 

렌더 방식(render method)이라는 용어는 전체 속성 이나 함수 부분만을 가리킬 수 있다.

 

class ComponentFactory extends React.Component {
  render() {}
}

 

렌더 방식은 return 구문을 반드시 포함해야만한다. 보통, 이 return문은 JSX표현식을 리턴한다. 

 

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

물론 이 중 어느 것도 렌더링 방법의 요점을 설명하지는 않는다.

당신이 지금까지 알고 있는 것은 그것의 이름이 렌더이고,

그것은 어떤 이유로든 return문이 필요하고,

당신은 그것을 당신의 컴포넌트 클래스 선언 body에 포함해야 한다는 것이다.

우리는 곧 그것의 '왜'에 도달할 것이다!

 

https://www.codecademy.com/courses/react-101/lessons/your-first-react-component/exercises/render-function