Render A Component

Render A Component

 

컴포넌트 클래스에 컴포넌트 작성 방법을 알려주는 일련의 지시사항이 필요하다는 것을 알게 되었다.

새 구성요소 클래스를 만들 때, 이러한 지시사항들은 당신의 클래스 선언의 body 이다. 

 

class MyComponentClass extends React.Component
{ // everything in between these curly-braces is instructions for how to build components

  render() {
    return <h1>Hello world</h1>;
  }
}

 

이것은 클래스 선언이 MyComponentClass 라는 이름의 새로운 컴포넌트 클래스를 만들어 낸것이다. 

MyComponentClass은 render라고 이름된 한개의 method를 가지고 있다.

이것은 스탠다드한 js class 문법을 통해 이루어진다. 

 

당신은 컴포넌트를 만들기 위해 실제적으로 어떻게 지시들을 동작해야하는지 아직 배우지 않았다. 

당신이 <MyComponentClass /> 표현을 사용함으로써 컴포넌트를 만들때, 이러한 instruction들은 무엇을 할까?

 

당신이 컴포넌트를 만들때마다, 컴포넌트는 컴포넌트 클래스의 모든 method들을 물려준다. (그대로 똑같이 전달.)

MyComponentClass 는 한가지 method를 가진다 : MyComponentClass.render()

따라서, <MyComponentClass /> 또한 render로 이름된 method를 가진다. 

 

당신은 수만개의 다른 <MyComponentClass /> 인스턴스를 생성할 수 있다. 

그리고 이것들은 각각 정확하게 같은 render method를 물려받을 것이다. 

 

이 레슨의 마지막 과제는 당신의 컴포넌트를 렌더하는 것이다. 

컴포넌트를 렌더하기 위해서, 컴포넌트는 render로 이름된 method를 가져야만한다. 

당신의 컴포넌트는 이것을 가졌다! 이것은 MyComponentClass로부터 render로 이름된 method를 물려받았다. 

 

당신의 컴포넌트가 렌더 메소드를 가지고 있기 때문에, 

그것을 호출하기만 하면 된다. 

이것은 약간 특이한 방식으로 일어난다. 

 

컴포넌트의 render method를 호출하기 위해, 당신은 ReactDOM.render()에 컴포넌트를 전달한다. 

ReactDOM.render()의 첫번째 인자로써 컴포넌트를 전달해라. 

 

ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

 

ReactDOM.render()는 <MyComponentClass />에게 render method를 호출하라고 말할것이다. 

 

<MyComponentClass />는  JSX요소인 <h1>Hello world</h1>을 리턴할 자신의 render method를 호출할것이다. 

 

ReactDOM.render()는 JSX요소 결과를 취하고, 가상 DOM에 그 결과를 추가할 것이다. 

이것이 스크린에 "Hello world"가 나타나게 만든다. 

 

---

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(
	<MyComponentClass />, 
	document.getElementById('app')
);

 

 

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