[React] React 기초 문법 정리

- 주석 처리 방법

{/* 주석 내용 */}

 

- 데이터 바인딩

{ } 로 감싸서 변수 넣기

var data = '안녕';
<div>{data}</div>

 

- JSX에서 class 선언

class가 아닌 className으로 선언

class = "blue-div" (X)
className = "blue-div" (O)

 

- Inline Style 주는 방법

ex) style = { {fontSize : "10px", align:"center"} }

 

 

- State 사용 방법

변수가 변경될 때 자동으로 HTML을 재렌더링하기 위함. 

• useState() : state를 하나 만들어주는 함수

import React, { useState } from 'react';

let [state_title, state_title_change] = useState("This is State");

state_title : State Value. 즉, "This is State" (1번 째 배열 항목)
state_title_change : State Value 변경 함수 (2번 째 배열 항목)

 

 

- onClick 사용

JSX : <div onClick={함수}>

JS : <div onclick="함수 or 코드">

<div onClick={ func_hi }>
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>

 

- Deep Copy 사용

object / array 자료형 deep copy 시 ... 을 이용

let [state_title, state_title_change] = useState(["지금 날씨는 영하 9도네요.","This is State", "오늘 풋살합니다~"]);

var deepCopyValue = [...state_title];