생활코딩 React 11. 컴포넌트 만들기

 

 

 

11. 컴포넌트 만들기

 

 

 

<App.js>

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render(){
  	return (
    <div className="App">
    	Hello, React!!
    </div>
    )
  }
}

export default App;

app이라는 클래스를 만들고 리액트의 컴퍼넌트라고하는 리액트가 갖고 있는 클래스를 상속해서

우리가 새로운 클래스를 만드는거다.  그리고 그 클래스는 render라는 매소드를 가지고 있다. 

 

 

App.js에 새로운 컴포넌트를 만들자.

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
   render() {
    	return (
            <header>
            	<h1>WEB</h1>
                world wide web!
            </header>
        );
    }
}

export default App;

여기에 render라고 적혀 있는데 우리가 알고 있는 함수는

 

function render () {}라고 적혀야 하지만 

 

자바스크립트의 최신 스펙에 들어가 있는 클래스는 안에 소속되는 함수는 function을 생략한다.

 

그리고 거듭 언급하지만 컴퍼넌트를 만들 떄는 그 컴퍼넌트는 반드시 하나의 최상위 태그로 시작해야한다.

(여기서는 header태그가 최상위 태그이다.)

 

새로만든 컴퍼넌트를 App컴퍼넌트에 적용하자.

 

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render(){
  	return (
    <div className="App">
    	<Subject></Subject>
    </div>
    )
  }
}

export default App;

 

 

 

 

개발자도구로 보면 리액트 코드에서는 그냥  <subject>인데 리액트가 코드를 처리한 다음에 최종적으로

 

웹브라우저가 알아 들을 수 있는 헤더(header)라는 이름의 태그와 그 안의 내용으로 바꿔 준 것이다.

 

즉 ,웹브라우저는 이 세상에 리액트라는 기술이 있는지 모른다!

 

 

그리고 우리가 위에서 짠 코드는 자바스크립트가 아니라 유사 자바스크립트다. 

왜냐하면 ruturn안에 있는 부분은 그냥 태그를 써버렸기 때문이다.

 

우리가 작성하고 있는 이 코드는 자바스크립트랑 거의 비슷한데 태그들을 우리가 그대로 사용할 수 있게 해주는 

페이스북에서 만든 컴퓨터 언어가 jsx이다.

 

우리가 jsx로 코드를 작성하면 그것을 CRA가 알아서 자바스크립트 코드로 컨버팅 해주는 것이다.

 

 

 

 

 

 

11.2 컴포넌트 만들기2

 

 

 

 

<App.js>

import React, { Component } from 'react';
import './App.css';

//Subject 컴포넌트 생략함


Class TOC extends Component{
	render(){
    	return (
            <nav>
            	<ul>
                    <li><a href="1.html">HTML</a></li>
                    <li><a href="2.html">CSS</a></li>
                    <li><a href="3.html">JacaScript</a></li>
                </ul>
            </nav>
        )
    }
}

Class Content extends Component{
	render(){
    	return (
            <article>
            	<h2>HTML</h2>
                HTML is HyperText Markup Language.
            </article>
        )
    }
}




class App extends Component {
  render(){
  	return (
    <div className="App">
    	<Subject></Subject>
        <TOC></TOC>
        <article></article>
    </div>
    )
  }
}

export default App;

App.js에 새로운 TOC,Content라는 컴포넌트들을 만든 후 추가하였다.

 

이렇게 컴포넌트를 사용하여 정리하니 App컴포넌트의 내용이 매우 심플해졌다.

 

우리가 리액트에서 컴퍼넌트를 바라보는 첫 번쨰 시각은 정리정돈의 도구로 보는 것이다.