React Component

이 글은 React의 Component에 관한 문법 및 개념을 정리하기 위해 작성하였습니다.

---

< What is the Component? >

React applications are made out of components.

A component is a small, reusable chunk of code that is responsible for one job.
(That job is often to render some HTML)

 

 

---

< Import React >

To use React library by importing React.

 

< Syntax >

import React from 'react';

: This code creates a new variable named 'React'.
  Its value is a particular, imported Javascript object called the React library that contains methods you need
  in order to use React.

 

 

---

< Import ReactDOM >

To help React interact with the DOM ( such as reactDOM.render( ) )

 

< Syntax >

import ReactDOM from 'react-dom';

: This code creates a new variable named 'ReactDOM' to help React interact with the DOM.

 

• To clarify :
  The methods imported from 'react' don’t deal with the DOM at all. They don’t engage directly with anything that isn’t part of React.
  The DOM is used in React applications, but it isn’t part of React. After all, the DOM is also used in countless non-React applications. Methods imported from 'react' are only for pure React purposes, such as creating components or writing JSX elements.

 

 

---

< Create a Component Class >

To create a React Component.

We can define component with function and class
(but we'll focus on class component first)

 

< Syntax >

class MyComponentClass extends React.Component {
  // code block
}

1. All class components will have some methods and properties in common (more on this later).
  Rather than rewriting those same properties over and over again every time, we extend the Component class from the React library.
-> So, to create component class, you must subclass React.Component

2. class name must be written in UpperCamelCase(to distinguish 'HTML Tag' and 'Component instance')

 

 

---

< Component Class Body(Instructions) >

The body of a component class will act as a set of instruction explaining to component class how it should build a React component.

There is only one property that you have to include in your instructions(body) : render method

 

< Syntax >

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

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

 

 

---

< Create a Component Instance >

To make a React component.

 

•  Instead of naming your JSX element something like h1 or div, give it the same name as a component class.

 

ex)

<!-- example 1 -->
<MyComponentClass />

<!-- example 2 -->
<MyComponentClass></MyComponentClass>

 

 

---

< Render a Component >

To render a component.

 

1. To render a Component, that components needs to have a method named render

2. To call a component's render method, you pass that component to ReactDOM.render( )

3. ReactDOM.render( ) will tell the component to call its render method.

 

ex)

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

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