[6/24 일반] React/ 실습 - 리액트 작동 원리와 기초(문법, 컴포넌트)

박재준·2022년 6월 24일

React node.js npm proj1 render visualstudiocode

1. 학습한 내용

1) 필기내용

리액트 : FrontEnd 프레임워크 중 하나(요즘 제일 많이 쓰는 웹서비스 개발의 프레임워크)
페이스 북 게발에 사용한 기술, 공개 소프트웨어(오픈), 화면 출력에 특화됨, 컴포넌트를 조립하여 화면 구성, GetElementById 이런 것들을 덜 사용, Virtual DOM(게임 엔진 원리 도입, 화면 출력 속도 빠름. 바뀌는 부분만 반영)
npm(노드 패키지 매니저) 설치 : 자바스크립트 관리 프로그램
웹팩 : 웹 브라우저가 해석할 수 없는 파일을 분석할 수 있게, 웹 문서 파일로 변환하는 도구, 간단한 노드 기반의 웹 서버 구동
리액트 개발 환경 설정 → Node.js(필수) / 에디터(VS Code등) / 웹 브라우저(파이어폭스. 크롬 등)
Nodejs 설치하기
1) https://nodejs.org/en/

2) recommanded for most users 설치(명령 프롬프트)
3) https://github.com/coreybutler/nvm-windows/releases → nvm-setup.zip 파일을 다운받기

명령 프롬프트 창에서
1) nvm –v
입력하면 nvm 환경을 알 수 있음
2) Nodejs 설치하기
nvm 16.15.1 설치하기
→ nvm install 16.15.1
3) nvm use 16.15.1
→ 16.15.1 버전으로 사용하겠다~
4) node –v 입력
→ v16.15.1이라고 나옴
5) npm –v 입력
→ npm WARN config global --global, --local are deprecated. Use --location=global instead.
8.11.0 라고 출력됨
6) 프로젝트를 설치하고 싶은 경로로 먼저 설정
7) npx create-react-app
8) cd reactProject
9) cd proj1
10) code . 입력
→ visual code 실행
node_modules는 많은 라이브러리를 저장해놓은 폴더
public 폴더는 정적인 것들(로고 이미지, 파비콘 등)
src 폴더에 직접 만드는 것들이 다 들어감

render : 기존에 화면 위에 화면을 입히는 명령문(기존의 화면을 변경하지 않고 그대로 입힘)
SPA: 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려줌. index.html 파일 하나에 태그를 변경시키는 것이 아니라, App.js의 자바코드를 통해서 변경시킴(끊김 없음)
vs code에서 확장 → reactjs code snippets 설치!
컴포넌트(중요) : JSX = Javascript + XML(또는 html)
컴포넌트 이름은 반드시 대문자로 시작(소문자면 기존의 태그와 헷갈림)
하나의 파일에 여러 가지 태그를 쓰면 분석하기 어렵고,
component의 기능 자체가 코드의 재사용성이 늘어남
단점 : 초기 로딩속도만 느림
box값 변경
props : 함수의 매개변수와 같은 존재

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

proj1/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

proj1/src/App.css

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

proj1/src/App.js

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

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

export default App;

proj1/src/component/TodayPlan.jsx

import React, { Component } from 'react';

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

export default TodaysPlan;

proj1/src/component/Box1.jsx

import React, { Component } from 'react';

class Box1 extends Component {
    render(props) {
        return (

            <div className="box">
                Box1
                <p>{this.props.name}</p>
            </div>
        );
    }
}

export default Box1;