[React] React 초기 설정, JSX, toISOString, props, toLocalString()

* 리액트의 대표적인 특징: 재사용성이 뛰어나고, 우려사항을 분리할 수 있다 (컴포넌트)

 

재사용성: 반복X

우려사항을 분리할 수 있음: 작고 관리 가능한 단위로 유지

함수처럼 코드를 여러개로 나눠서 짜맞추는 것

 

* 초기 실행

 

create-react-app 실행하기 위해서는 node.js설치가 필수(vue create 할 때에도 필요했음)
node.js가 설치되어있으면, 개발서버에서 미리보기를 할 수 있음

 

npx create-react-app 생성하려는폴더명

cd 생성한폴더명
npm start	//개발서버 구동 리액트 미리보기 하는 중

 

package.json : 프로젝트에서 어떤 패키지 사용하고 있는지 보여줌

 

npm install

package.json에 등록되어있는 필요한 패키지 등을 설치해줌

 

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
//index.html에 있는 <div id="root"></div>위치에 렌더링하라고 알려주는 것 = createRoot메서드의 역할

root.render(<App />);
//root 객체에서 render 메서드를 호출하여 react에게 선택된 div에서 무엇이 렌더링되어야 하는지 알려줌
//여기서는 App이 렌더링되어야 하기때문에 App

 

* css파일을 import하면 .css라고 적어줘야하는데 js파일의 경우 .js 떼고 import해줘야한다.

 

* 사용자 지정 컴포넌트는 반드시 대문자로 시작해야한다

import ExpenseItem from "./components/ExpenseItem"

function App(){
	return(
    	<h2>hello</h2>
    	<ExpenseItem></ExpenseItem>
    )
}

소문자로 시작되는 요소는 내장 html요소/ 대문자로 시작되는 요소는 개발자에 의해 정의된 요소 (component)

 

* js내에서 <div> html요소를 정렬하기 위해서는 format document 키를 사용하면 보기 쉽게 정렬해준다.

=> ⬆️ + command + J (사용자 설정해놨음) 

 

 

* JSX(JavaScript XML) : 기존의 Javascript를 확장시켜 XML을 추가한 문법

브라우저에서 실행하기 전에 바벨을 실행시켜 일반 자바스크립트 코드로 변환시킨다. 

위의 예에서 App()내의 <h2></h2>도 JSX라고 할 수 있음

 

 1. 반드시 부모요소가 감싸고 있는 형태여야 한다. ex) <div></div>

import './ExpenseItem.css';

function ExpenseItem() {
  return (
    <div>
      <div>2022년 12월 15일</div>
      <div>
        <h2>파스쿠찌 프루티하동</h2>
        <h2>₩5,000</h2>
      </div>
    </div>
  );
}

export default ExpenseItem;

2. class가 아니라 className을 사용하여 클래스 이름을 부여한다.

import './ExpenseItem.css';

function ExpenseItem() {
  return (
    <div className='expense-item'>
      <div>2022년 12월 15일</div>
      <div className='expense-item__description'>
        <h2>파스쿠찌 프루티하동</h2>
        <h2 className='expense-item__price'>₩5,000</h2>
      </div>
    </div>
  );
}

export default ExpenseItem;

3. JSX안에서도 자바스크립트 표현식을 사용할 수 있다.{}(중괄호)안에서 !

유효한 표현식 전부 사용 가능. (계산도 가능한~)

import './ExpenseItem.css';

function ExpenseItem() {
  const expenseDate = new Date(2022, 11, 19);
  const expenseTitle = '파스쿠찌 프루티하동';
  const expenseAmount = '5,000';
  return (
    <div className='expense-item'>
      <div>{expenseDate}</div>
      <div className='expense-item__description'>
        <h2>{expenseTitle}</h2>
        <h2 className='expense-item__price'>₩{expenseAmount}</h2>
      </div>
    </div>
  );
}

export default ExpenseItem;

//화면이 로드되지 않는다. 이유는?
//date객체는 텍스트로 출력될 수 없기 때문.

 <div>{expenseDate.toISOString}</div>

내장메서드인 ISOString사용해서 출력할 수 있다.

ISOString 사용해야 date값을 string으로 확인 가능함.

 

* props를 사용해서 동적으로 값을 할당할 수 있다.

import ExpenseItem from "./components/ExpenseItem";

function App() {
  const expenses= [
    {
      id:'e1',
      title:'Toilet Paper',
      amount: 94.12,
      date: new Date(2021, 2, 3),
    },
    {
      id:'e2',
      title:'NoteBook',
      amount: 129.12,
      date: new Date(2020, 5, 13),
    },
    {
      id:'e3',
      title:'iPhone',
      amount: 900.32,
      date: new Date(2022, 5, 14),
    },
    {
      id:'e4',
      title:'Computer',
      amount: 695.39,
      date: new Date(2021, 7, 3),
    }
]
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem title={expenses[0].title} amount={expenses[0].amount} date={expenses[0].date}></ExpenseItem>
      <ExpenseItem title={expenses[1].title} amount={expenses[1].amount} date={expenses[1].date}></ExpenseItem>
      <ExpenseItem title={expenses[2].title} amount={expenses[2].amount} date={expenses[2].date}></ExpenseItem>
      <ExpenseItem title={expenses[3].title} amount={expenses[3].amount} date={expenses[3].date}></ExpenseItem>
    </div>
  );
}
 
export default App;

import './ExpenseItem.css';

function ExpenseItem(props) {
  
  return (
    <div className='expense-item'>
      <div>{props.date.toISOString()}</div>
      <div className='expense-item__description'>
        <h2>{props.title}</h2>
        <h2 className='expense-item__price'>₩{props.amount}</h2>
      </div>
    </div>
  );
}

export default ExpenseItem;

 

* toLocalString()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Date.prototype.toLocaleString() - JavaScript | MDN

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// 아래의 형식은 로케일의 로컬 타임존을 가정한다
// America/Los_Angeles for the US

// 미국 영어는 달-일-년 순서와 AM/PM이 있는 12시간을 사용합니다
console.log(date.toLocaleString("en-US"));
// → "12/19/2012, 7:00:00 PM"

// 영국 영어는 일-달-년 순서와 AM/PM이 없는 24시간을 사용합니다
console.log(date.toLocaleString("en-GB"));
// → "20/12/2012 03:00:00"

// 한국어는 년-월-일 순서와 AM/PM이 있는 12시간을 사용합니다
console.log(date.toLocaleString("ko-KR"));
// → "2012. 12. 20. 오후 12:00:00"

// 아랍어를 사용하는 대부분의 아랍국가는 동부 아라비안 숫자를 사용합니다
console.log(date.toLocaleString("ar-EG"));
// → "٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص"

// 일본어의 경우, 어플리케이션이 일본 달력을 사용하고 싶을 수 있습니다
// 2012년의 경우 Heisei 24년 이었습니다
console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
// → "24/12/20 12:00:00"

// 발리어와 같이 지원되지 않을 수 있는 언어를 요청할 때, 대체 언어를 포함합니다. (이 경우에는 인도네시아어)
console.log(date.toLocaleString(["ban", "id"]));
// → "20/12/2012 11.00.00"

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// Request a weekday along with a long date
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

console.log(date.toLocaleString("de-DE", options));
// → "Donnerstag, 20. Dezember 2012"

// 어플리케이션은 UTC를 사용할 수 있고 그것을 보이게 할 수 있습니다.
options.timeZone = "UTC";
options.timeZoneName = "short";

console.log(date.toLocaleString("en-US", options));
// → "Thursday, December 20, 2012, GMT"

// en-US도 24시간 사용이 가능합니다
console.log(date.toLocaleString("en-US", { hour12: false }));
// → "12/19/2012, 19:00:00"