리액트 시작하기

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리다.
따라서 JavaScript 언어에 대한 기본적인 이해가 필요하다.

React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.
서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보자
고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보자
컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인이다.

Create React App

npx는 npm 5.2+ 버전의 패키지 실행 도구다.

npx create-react-app my-app
cd my-app
npm start

Create React App 은 백 앤드 로직이나 데이터베이스를 제어할 수 없다. Create React App 은 프런트 앤드 빌드 파이프라인만 생성하기 때문에 백 앤드를 원하는 대로 사용할 수 있다. Create React App는 Babel이나 webpack같은 build 도구를 사용하나, 설정 없이도 동작한다.

프로덕션을 배포할 준비가 되었을 때, npm run build 를 실행하면 build 폴더 안에 제작한 앱의 최적화된 Build를 생성한다.

왜인지 나는 리액트 설치가 안됐다.
그래서, npx를 한번 지웠다가 다시 설치했다.

Next.js

Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션이다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각한다.

CDN 링크

<div class="gatsby-highlight" data-language="html"><pre class="gatsby-code-html"><code class="gatsby-code-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/react@17/umd/react.development.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/react-dom@17/umd/react-dom.development.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div>

위의 코드는 개발용으로 적합하며 배포용 버전에는 적합하지 않다. React의 용량 및 성능 최적화된 배포용 버전은 아래와 같이 제공되고 있다.

<div class="gatsby-highlight" data-language="html"><pre class="gatsby-code-html"><code class="gatsby-code-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/react@17/umd/react.production.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/react-dom@17/umd/react-dom.production.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div>

crossorigin 속성이 필요한 이유

CDN을 통해 React를 사용한다면, crossorigin 어트리뷰트(attribute)와 함께 사용하는 것을 권장한다.

<div class="gatsby-highlight" data-language="html"><pre class="gatsby-code-html"><code class="gatsby-code-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div>

여기까지가 기본 설치

가장 간단한 hello world 출력을 건너뛰고

import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import image from 'C:\\Users\\SP210422\\Downloads\\main_1112.jpg';

function formatName(user) {
  
  return user.firstName + ' ' + user.lastName;
}
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez',
  avatarUrl: image,
  isState : true
};
const input =  <input className={user.isState ? 'hello' :'loginId' } type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />;
const element = (
  <div>
  <img src={user.avatarUrl} alt=""/>
  {input}
  <button type='button' onClick={()=>user.isState = !user.isState}>hello</button>
  </div>
);
// 이것은 안전합니다.

ReactDOM.render(

  <App />,
  document.getElementById('root')
);

index.js에서 이것저것 넣어보고 바꿔보았다.