[React] 시작 전 준비 1단계( 리액트 코드 )

안녕하세요 저번 에는 

React를 시작하기전에 create-react-app basic-react를 통해서 만들어진 basic-react 폴더에서 보면

기본적인 리액트 화면과 같이 리액트가 어떤식으로 이루어져있는지 코드 확인이 됩니다. 

import 구문이 있는데

저는 import 하면 자바에서 패키지 가져올떄 import java.lang.nullException~~.. 뭐 이런식으로

가져온것만 기억이 나서 js에도 있는것이 매우 신기 합니다.

프론트에서는 <script 태그를 통해서 가져오는데 그렇지 않은 경우에 대해서는 잘 몰랐었습니다.

import React, { Component } from 'react';

->

 

const React = require('react');

const Component = React.Component; 

와 같다고 볼수 있습니다.

위에서 보면  import React from 'react 랑 const React = require('react'); 는 알겠는데

import {Component} from 'react'는 잘모르겠네요

이부분에 대해서 알아 보니

비 구조화 할당 이라고 ES6 스펙에 있는 기능인데

비 구조화 할당에 대해서는 나중에 다시 한번 포스팅 하도록 하고

해당 비 구조화 할당 중 신기 한것이 있어 하나 가져와 봤습니다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

반환 값 무시인데요  return 으로 1,2,3 배열을 반환 했지만 

반환 을 위와같이 비 구조화 할당을 진행시 중간 반환값인 2 를 무시 할수 있다고 하네요 ㅋㅋ 매우 신기 ;

react라는 것을 임포트하여서 가져오는데 그중 {Component}로 받게 되면

react.Component로 받아서 할당 한다고 보면되겠네요 

정리를 하자면 

리액트 코드의 첫줄은 

import React, { Component } from 'react';는

해석하자면

react를 가져와서 React에 넣었고 Component는 비구조화 할당으로 react안에 있는 react.Component를 가져와서 할당했다고 봐도 되겠습니다.

그리고 리액트를 시작하기전에  번들링 도구에 대한 지식이 있어야 합니다. 

번들링 도구는 가장 유명한 웹팩 (webpack)을 알아야 할 것 같고 

여러 가지 파일들을 불러오는 것은 webpack 에서는 loader가 이 역할을 수행해냅니다.

css-loader는 CSS 파일을 

file-loader는 웹 폰트, 이미지, 미디어 파일 등 

babel-loader는  js 파일들을 불러오면서 ES6 -> ES5로 바꿔주는 역할

원래는 이 로더들을 통해서 설정해야 하는데  create-react-app 에서 이 작업들을 전부 로컬에서 해주는 것 같네요

(로컬 테스트용으로) 이후에는 직접 다 해야 하는것으로 보입니다.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

이 구분에 대한 해석이 어느정도 끝난 것 같습니다.

react를 가져와서 React와 Component 에 할당 했고 

svg와 css의 경우는 css-loader와 file-loader등 로더로 설정을 해야 할것으로 보이네요

그다음

class App extends Component {

이 부분입니다.

js에서도 클래스를 만들었고 상속으로 Component를 받았습니다.

위의 비 구조화 할당으로 Component를 가져왔으니 가능하겠죠?

리액트의 컴포넌트를 만들어지는 기본방법으로 보입니다.

class frontButton extends Component로 하면 화면 버튼으로 제가 만들어서 쓸수 있을 것 같네요

벌써부터 재미..

그다음 render함수를 보겠습니다.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

<p className="App-intro">

To get started, edit 오오미 <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

}

export default App;

바로 render() { 

// do thing;;

}}으로 되어있는데

내부함수에 function render(){}    도 아니고

var render = function() 도 아니네요;; 이게 뭘까 했습니다.

이 점도 찾아 보니 ES6에  생긴 

간결 메서드

Concise Method()

라고 하네요

ES 5에서

var beforeObj = {
        name : "beforeObj",

  objShow : function(){

   }

 };

였다면 ES6에서는

var beforeObj = {

name :"newObj",

objShow(){

}

}

와같이 사용이 가능하다는 점입니다. 그렇기 때문에 render 도 사실은

var render = function(){} 또는 render : function(){} 이어야 할것 같지만 ES6문법 에 의해서

render(){

}가 될수 있습니다. 

그리고 render() 함수에 대해서 보자면 리액트에서는 render라는 함수를 통해서 UI 렌더링 기능을 진행한다고 합니다

렌더링은 JSX라는 문법을 통해서 html 과 매우 유사한 형태로 반환되지만 실제적으로는 그렇진 않습니다.

' ' + ' 형식으로 추가하는것도 아니고 그냥 생 html처럼 보이거든요

js문법도 물론 아니고  리액트 문법이라 보는것이 좀더 맞겠네요 렌더링 시( render 함수 호출 시 ) 에는

render 에 있는 JSX들을 계속 반복하며서 HTML을 만들기 위한 오브젝트를 생성합니다.

오브젝트가 전부 생성되면 해당 정보를 통하여 HTML 을 마크업 그리고 실제 DOM 에 붙여서 화면에 나타나게 합니다.

render ()호출 - HTML를 그리기위한 정보 객체 생성 (내부에 다른 Component가 있을 경우다시 돌면서 생성)

-> 해당 정보로 HTML 맠업 생성 -> 실제 DOM 에 붙임