React - 3

JSX(Javascript Syntax eXtension)

-리액트에서 element(요소)를 만들어내는 것

-중괄호를 사용해 자바스크립트 표현을 포함시킬 수 있음

-JSX 자식을 포함할 수 있음

//compo_test.js
​
export const user = {
    firstName: '클레이튼',
    lastName: '커쇼'
}
​
export function printFullName(user){
    return user.firstName + user.lastName
}


출처: https://kim6394.tistory.com/116?category=681336 [Gyoogle (규글)]

---

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {user, printFullName} from './compo_test' //compo_test.js에서 {user 과 printFullName 을 가져옴}
​
const printFull = <h1> {printFullName(user)} </h1>
ReactDOM.render(printFull, document.getElementById('fullname'))


출처: https://kim6394.tistory.com/116?category=681336 [Gyoogle (규글)]

ES6 방식 작성법

Array

const arr = [1,2,3,4]

배열길이

const arrleng = arr.length;

배열 요소 추가

const arr2 = arr.concat(5);

//concat은 기존 배열의 값을 해치지 않음 arr [1,2,3,4] => [1,2,3,4]

const arr3 = arr.push(5);

//push는 기존 배열의 값을 해침 arr [1,2,3,4] => [1,2,3,4,5]

배열 요소 삭제

const lastArr = arr.pop() //맨 뒤의 요소를 제거

 

map

const arr2 = arr1.map(function(x) {x+1})

//arr1의 각 요소를 x매개 변수로 x+1한 값을 arr2로 반환하여 배열로 만듦.

 

Object

const obj1 = {

    key:value,

    num:1

}

var obj = {};

for(var key in ojb) {

    console.lob(key + '=>' + obj[key])

}

 

JSX

const MyCompo = {
    key1 : function getKeyValue1(props){
        return <div> Imagine a {props.color} here </div>
    }
}
​
//렌더링 추가
<MyCompo.key1 color="blue"/>


출처: https://kim6394.tistory.com/116?category=681336 [Gyoogle (규글)]

-React Component는 . 표시를 통해 참조할 수 있음 ( 예시의 MyCompo.key1 )

-사용자 정의 컴포넌트는 대문자로 사용

-소문자인 경우 경고 혹은 문자로 출력됨

 

JSX의 장점

-보기 쉬움

-오류 검사가 편함

-html 태그 사용가능

 

VSCode(Visual Studio Code) 디버그

-Extension 탭에서 Debugger for Chrome 설치, 리로드

-index.js에서 브레이크 포인트 지정

-Chrome Debugger 세팅 Debugger View에서 open launch.json 클릭 후 현재 기동 포트인 3000번으로 변경 후 저장

-yarn start 후 디버그 F5 시작, F10 넥스트, Shift+F5 디버그 종료