• 준비된 리액트 프로젝트를 받아오는 마법의 명령어

  npx create-react-app [Project Name]
  

JSX

• 리액트에서만 쓰는 HTML 태그와 같은 문법체계를 JSX라고 부른다.

• JSX 코드에서 자바스크립트 코드를 집어넣고 싶다면 중괄호를 사용하여 그 안에 적으면 된다.

  let posts = '강남 고기 맛집';
  
  return (
  	<div className="App">
  		<h4> { posts } </h4>
  	</div>
  );
  

• 단, style 속성을 적용할 땐 객체로 넣어줘야 한다. 속성명은 camelCase로 쓴다.

  return (
  	<div className="App">
  		<h4 style={ {color : 'blue', fontSize : '30px'} }> '강남 고기 맛집' </div>
  	</div>
  );
  

State

파일 상단에 아래 코드를 작성한다.

import React, { useState } from 'react';

리액트 애플리케이션에서는 state의 값이 바뀔 때마다 화면을 다시 그린다.

state 선언과 사용은 다음과 같이 한다.

let [createdTimes, changeCreatedTimes] = useState(['2022/09/06 (Tue)', '2022/09/05 (Mon)', '2022/09/04 (Sun)'])

ES6

Reference 타입의 데이터를 Deep Copy 하려면…

var newArray = [...curArray];