✅ React.js Basic

☑️ 소개

FrontEnd Framework 중의 하나.
다른 Framework는 Angular, vue.js 등이 있음

☑️ 개념 및 장점

• 페이스 개발에 사용한 기술
• 공개 소프트웨어
• 화면 출력에 특화된 프레임워크

• 컴포넌트를 조립하여 화면 구성
• 게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(virtual DOM)

☑️ 실습에 필요한 필수 도구

• 노드 패키지 매니저(npm) : 자바스크립트 관리 라이브러리 도구
• 웹팩(Webpack) : 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구
• 간단한 노드 기반의 웹 서버 구동

✅ React.js 환경설정

☑️ 개발 환경 설치

• Node.js(필수) : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용
• VSCODE (필수)
• 웹 브라우저 필요 (익스플로러 안됨)

☑️ Node.js 설치하기

• https://nodejs.org/en/
• recommanded for most users 설치
• https://github/com/coreybutler/nvm-widows/releases

npm이란?
: node.js로 만들어진 유용한 모듈들을 가져다 쓰고 관리할 수 있는 패키지

▶ 셋업 설치하기

▶ 경로 수정하기(C:\React\nvm)한 후 설치 진행!

▶ 명령 프롬프트 관리자 권한 실행! (입력순서는 다음과 같음)

1. nvm -v
2. nvm install 16.15.1
3. nvm use 16.15.1
4. node -v
5. npm -v

▶ 설치 및 각 버전들 체킹하는 과정이라고 생각하면 됨!

✅ React.js 프로젝트

☑️ 프로젝트 시작하기

6. cd\, cd react, 'dir'

▶ 프로젝트를 설치하고 싶은 경로로 먼저 이동하기

7. npx create-react-app proj1

▶ 프로젝트 설치하기! ( 설치 완료 되면, Happy Hacking! 나옴 )

8. code .

▶ VSCODE 실행

9. npm -start

▶ React 프로그램 실행

☑️ React 파일 구조

• node_modules : 많은 라이브러리들이 저장되어있다고 함
• public : 고정되어있으며 정적인 콘텐츠들이 저장되어있음
• src : 우리가 만드는 것은 전부 해당 폴더 하위로 가게 됨.

☑️ SPA

Single Page Application의 준말 즉 페이지가 하나라는 뜻이다. 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹앱 경험을 선사해줄 수 있다.

단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.

리액트는 이런 SPA의 형식이다.

☑️ App.js 수정 테스트

• App.js 의 기본 설정 코드

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

▶ 해당 기초 설정을 다음과 같이 수정한다. ( <header> delete )

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <div>Hello World!</div>
    </div>
  );
}

export default App;

▶ 결과물은 다음과 같다.

☑️ 플러그인 설치

Reactjs code snippets

☑️ 컴포넌트 및 JSX 파일 생성

• JSX = JavaScript + XML
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하는 것

component 폴더를 해당 위치에 생성하고, 안에 jsx 파일을 만들고 rcc 기입하기

import React, { Component } from 'react';

class TodaysPlan extends Component {
  render() {
    return (
      <div className="message-container">
        놀러가자!!!
      </div>
    );
  }
}

export default TodaysPlan;

▶ jsx 파일 코드 내용

import logo from './logo.svg';
import './App.css';
import TodaysPlan from './component/TodaysPlan';

function App() {
  return (
    <div className="body">
      <TodaysPlan/>
    </div>
  );
}

export default App;

▶ App.js 파일로 가서 위의 코드처럼 수정한다.

• App.css 기본 코드 내용 ( 참고용, 지울꺼임 )

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

✅ React.js 프로젝트 응용

☑️ 컴포넌트로 Box 만들기

• 컴포넌트(Box1.jsx) 만들기

import React, { Component } from 'react';

class Box1 extends Component {
  render(props) {
    return (
        <div className="box">
          Box{this.props.index}
          <p>{this.props.name}</p>
        </div>
    );
  }
}

export default Box1;

• App.js 코드 설정하기

import logo from './logo.svg';
import './App.css';
import Box1 from './component/Box1';

function App() {
  return (
    <div>
      <Box1 name="한국" index="1"/>
      <Box1 name="미국" index="2"/>
      <Box1 name="중국" index="3"/>
    </div>
  );
}

export default App;

• App.css 수정하기

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

1. 먼저 jsx 파일을 만든다.
   props 는 매개변수로서 설정되고, {this.props.속성} 으로 작성한다.

2. App.js 파일을 수정한다.
   <컴포넌트명/> 안에 속성을 지정한다. 이 속성은 jsx 파일의 매개변수의 속성으로 넘어간다.

3. css 효과는 `App.css' 에서 원하는 대로 수정하면 된다.

☑️ npm start 종료하는 방법

Ctrl + C 를 터미널에서 누르고 y 입력하면 자연스럽게 종료된다.

---

생각보다 감이 안오기는 하지만 그래도 열심히 하다보면 익숙해지리라 생각하고 공부해야겠다.